我在想什么......
我正在尝试制作一个具有悬停效果的菜单.如果你悬停一个链接,它的背景颜色应该改变.如果你去下一个,它应该顺利地改变到下一个链接.
问题
当您将鼠标悬停在一个链接上然后转到下一个链接时,元素之间会有一个小间隙.如果你的鼠标在那个确切的位置,没有任何反应.
工作实例
.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 …