你如何使用list-style-type:none正确地将hover css应用于<li>元素？

Question

我有一个列表,每个列表项有两个锚标记,一个向左浮动,另一个向右浮动.当包含元素的list-style-type是disc时,在两个元素之间悬停可以正常工作.但是如果list-style-type更改为none,则当你在元素之间悬停时,li:hover css似乎不适用.

我已在最新版本的Chrome,Firefox和Internet Explorer中确认了此问题.

ul{
    list-style-type: disc;
    /* Replace the previous line with the one below.
        The hover styling no longer applies when the cursor is between anchor tags. */
    /* list-style-type: none; */
}

li{
    clear:both;
}

.left{
    float: left;
}

.right{
    float: right;
    opacity: 0;
}

li:hover > a{
    text-decoration: underline;
    opacity: 1 !important;
}

<ul>
    <li>
        <a class="left">Option 1</a>
        <a class="right">Only</a>
    </li>
    <li>
        <a class="left">Option 2</a>
        <a class="right">Only</a>
    </li>
</ul>

https://jsfiddle.net/thomaslangston/xh7r9b68/

Answer 1

问题很有趣.在您的代码段中,浮动两个子元素,以便将它们从常规内容流中取出.

在第一个示例中,如果光盘显示,则li包含内容,因此您可以使用一些高度.

如果你拿出套装list-style-type: none,子弹/圆盘已经消失,li现在没有高度,所以悬停不会做任何事情.

如果您向边框添加边框,则更清晰li.您可以通过添加overflow: auto到li包含浮动来修复问题,以便li保留非零高度.

请参阅下面的两个示例,第一个显示光盘,第二个没有.

请注意,如果添加边框,则在边界移动时会激活悬停(鼠标定位需要一些精确度).

ul.ex1 {
list-style-type: disc;
}
ul.ex2 {
list-style-type: none;
}
li {
  clear: both;
  border: 1px dotted gray;
}
ul.ex2 li {
  overflow: auto;
}
.left {
  float: left;
}
.right {
  float: right;
  opacity: 0;
}
li:hover > a {
  text-decoration: underline;
  opacity: 1 !important;
}

<ul class="ex1">
  <li>
    <a class="left">Option 1</a>
    <a class="right">Only</a>
  </li>
  <li>
    <a class="left">Option 2</a>
    <a class="right">Only</a>
  </li>
</ul>

<ul class="ex2">
  <li>
    <a class="left">Option 1</a>
    <a class="right">Only</a>
  </li>
  <li>
    <a class="left">Option 2</a>
    <a class="right">Only</a>
  </li>
</ul>