按鈕的動作半徑在css

Question

看看有沒有人可以告訴我爲什麼我的css按鈕的動作半徑大到四周，有什麼辦法可以減少它嗎？ 當我把鼠標放在進入空閒狀態的手遠遠超出了按鈕的文字時，我想減少這個區域的動作，但不是如在css中那樣

謝謝。

CSS：

/*BOTONES SUPERIOR*/ 

#botonera-blogsuperior { 
    width: 900px; 
    height: 35px; 
} 
.texto-botones-blogsuperior { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    font-style: normal; 
    line-height: 10px; 
    color: #FFF; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-left: 10px; 
} 

.menu-blogsuperior, 
.menu-blogsuperior ul, 
.menu-blogsuperior li, 
.menu-blogsuperior a { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 

} 

.menu-blogsuperior { 
    height: 31px; 
    width: 900px; 

} 

.menu-blogsuperior li { 
    position: relative; 
    list-style: none; 
    float: right; 
    display: block; 
    height: 21px; 

} 

.menu-blogsuperior li a { 
    display: block; 
    padding: 0 0px; 
    padding-right: 15px; 
    margin: 25px -59px; 
    margin-right: 12px; 
    line-height: 22px; 
    text-decoration: none; 
    background-image: url (boton-fondo-probar.png); 
    background-repeat:no-repeat; 
    background-position:center; 
    height:27px; 
    width:105px; 
    background-position:46px -1px; 
    background-size:69px 24px; 




    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    color: #000000; 

    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
    text-align: right; 
    text-align: right; 
    text-align: right; 
    text-align: right; 
} 

.menu-blogsuperior li:first-child a { border-left: none; } 
.menu-blogsuperior li:last-child a{ border-right: none; } 

.menu-blogsuperior li:hover > a { 
    color: #FF6C6C; 
} 

.menu-blogsuperior ul { 
    position: absolute; 
    top: -109px; 
    left: 0; 

    opacity: 0; 
    background: #1f2024; 

    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 

    -webkit-transition: opacity .10s ease .1s; 
    -moz-transition: opacity .10s ease .1s; 
    -o-transition: opacity .10s ease .1s; 
    -ms-transition: opacity .10s ease .1s; 
    transition: opacity .10s ease .1s; 
} 

.menu-blogsuperior li:hover > ul { opacity: 1; } 

.menu-blogsuperior ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 


} 

.menu-blogsuperior li:hover > ul li { 
    height: 36px; 
    overflow: visible; 
    padding: 0; 
} 

.menu-blogsuperior ul li a { 
    width: 36px; 
    padding: 10px 0 1px 10px; 
    margin: 0; 

    border: none; 
    border-bottom: 0px solid #353539; 
} 

.menu ul-blogsuperior li:last-child a { border: none; } 

HTML

<div class="botonera-blogsuperior"><ul class="menu-blogsuperior"> 
    <li><a href="/blog/indice">INDICE</a></li> 
    <li><a href="/blog/category/2/">DINO</a></li> 
<li><a href="/blog/category/1/">LEONES</a></li> 


</ul> 
</div> 

例：

http://jsfiddle.net/#&togetherjs=vSgITe2BmT

謝謝！

Answer 1

我剛剛移動了所有從a標記到li標記的鏈接形狀的定義，並用空白替換了填充。

添加到您的CSS：

.menu-blogsuperior li { 
    height:27px; 
    width:105px; 
    padding: 0 0px; 
    margin: 25px -59px; 
    margin-right: 27px; 
    background-image: url (boton-fondo-probar.png); 
    background-repeat:no-repeat; 
    background-position:center; 
    background-position:46px -1px; 
    background-size:69px 24px; 
    text-align: right; 
    text-align: right; 
    text-align: right; 
    text-align: right; 
} 

因此，這也正是像我這樣的調整在你的CSS這樣的定義：

.menu-blogsuperior li a { 

    text-decoration: none; 

    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    color: #000000; 

    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 

} 

在搗鼓爲我工作。