我正在尝试...
我正在尝试制作一个带有悬停效果的菜单。如果你将鼠标悬停在链接上,它的背景颜色应该会改变。如果你移到下一个链接,它应该平滑地切换到下一个链接。
问题
当你将鼠标悬停在一个链接上然后移到下一个链接时,元素之间会出现一个小间隙。如果你的鼠标正好停留在那个位置,什么也不会发生。
工作示例
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
无法工作的示例
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
我的观察
如果你只改变 font-size
一个像素,它就可以正常工作了。如果我使用IE浏览器,这两个例子都可以工作,但在Chrome中,只有"Working One"可以工作 :D
我的问题是...
这是Chrome的bug还是有可能让"not working one"也工作的方法呢?
a
标签的内置显示属性与Chrome浏览器中的一些默认样式相结合。很好地发现了这个问题。加1分给你,因为你提出了一个非常好的问题。 - Fritsa
标签之间有一条单行(1像素宽)不应该存在。这些a
标签需要直接相邻。 - Frits