我正在尝试创建导航栏。我想要的是当我将鼠标悬停在块项目时它会改变背景。我的问题是块比链接稍大,所以如果我将鼠标移到链接区域之外,我就不能点击它。 这是我创建的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;
}
答案 0 :(得分: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;
...
}
答案 1 :(得分:1)
问题是你的填充应用于你的LI。删除使<a>
填充你的LI。
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;
}