Question

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: