css：块链接不正确

我正在尝试创建导航栏。我想要的是当我悬停到块项目时，它会改变背景。我的问题是块比链接大一点，所以如果我将鼠标移动到链接区外，我不能点击它。这是我创建的jsfiddle，我改变了链接的背景颜色时悬停在一个更好的视觉帮助 http://jsfiddle.net/Tx8MK/3/ 所以如何使链接块适合列表块。谢谢css：块链接不正确

#navBar li{ 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 

    border:none; 
} 

#navBar li:hover{ 
border: 1px solid #777777; 
border-bottom:none; 
    padding: 3px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

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

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    padding: 0 25px; 

} 
#navBar li a:hover{ 

    text-decoration: none; 
    color:#000; 
    display:block; 
    padding: 0 25px;  
    background:#fff; 

}

来源

2013-07-30 stenwolf

而不是给填充到列表中的项目，给它的锚。下面更新小提琴：

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    padding: 4px 10px 4px 10px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
... 
}

http://jsfiddle.net/hQJye/

来源

2013-07-30 19:22:49 Benjamin

问题是您的填充适用于您的LI。删除，使<a>填补你的LI。

http://jsfiddle.net/Tx8MK/5/

html, body { 
    margin: 0; 
    padding: 0; 
} 

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

nav { 
    position:absolute; 
    top:0; 
    width:100%; 
    background: #000; 
    color: #fff; 
    list-style: none; 
} 

nav section{ 
    margin:10px 20px; 
} 

#navBar li{ 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    margin-right:30px; 
    border:none; 
} 

#navBar li:hover{ 
    border: 1px solid #777777; 
    border-bottom:none; 


    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

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

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    padding: 0 25px; 
} 
#navBar li a:hover{ 
    text-decoration: none; 
    display:block; 
    color:#000; 

    background:#ff0000; 

}

来源

2013-07-30 19:20:11

css：块链接不正确

回答

相关问题