这里有两个问题:
首先:我有四个 <li>
它的显示是内联 block 并向左浮动。我想要 EACH <li>
具有鼠标悬停时 红色边框底部的样式。
第二:我想让文本的边框底部与其包装器的边框底部重叠(在本例中是 <ul>
的 <li>
。)
<ul id="menu">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
和
#menu {
list-style:none;
}
#menu li {
display:inline-block;
}
#menu:hover li {
display:inline-block;
border-bottom:solid 5px red;
}
这是我的 Fiddle
在 fiddle 中,蓝色边框与红色边框分开。我希望它们成为一个边界。
最佳答案
只需将您的 CSS 更改为:
#menu li:hover {
display:inline-block;
border-bottom:solid 5px red;
margin-bottom:-5px;
}
首先,你想将 :hover
应用到正在悬停的单个 li
上,而不是所有 li
当 ul 是悬停,然后你想用应用边框的宽度偏移它的底部(通过负数
margin-bottom`实现)。
Demo Fiddle
关于html - 将两个边框合并为一个并将每个功能设置为 hover li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25243298/