1

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

#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;

}
4

2 回答 2

3

与其给列表项填充，不如给锚点。下面更新了小提琴：

#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-30T19:22:49.310 回答
1

问题是您将填充应用于您的 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-30T19:20:11.177 回答