我现在有一个导航栏,它完全按预期工作,除了一件小事:当我将鼠标悬停在它上面时,不透明度变化不会一直向下延伸到底部。 这是几个屏幕截图: 这个:http://imgur.com/QgEFWMK显示未选中的样子 这个:http://imgur.com/H4fksil显示当我的光标在顶部时的样子
如您所见,底部的轻微空白看起来很难看,我不知道如何补救。我的 HTML/CSS 如下:
HTML:
<div class="navbar center affix" role="navigation">
<ul>
<li><a href=# itemprop="url"><span itemprop="titlenav">Home</span></a></li></ul></div>
CSS:
.navbar {
background-color:#747A80;
width:100%;
height:auto;
box-shadow: 0px 1px 10px #5E5E5E;
top:0px;
border-bottom:solid #000000;
}
.navbar li {
display:inline-block;
text-align: center;
color: #FFFFFF;
}
.navbar li a{
display: block;
padding:15px;
margin-bottom:-10px;
line-height:20px;
color:#F9F9F9;
}
.navbar li:hover {
opacity:1;
background:#575A5C
}
任何帮助将不胜感激!谢谢!
最佳答案
关于html - 当我将鼠标悬停在导航栏中时,如何填充文本背后的背景? [HTML/CSS],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24101879/