Question

是否可以将此代码从jQuery转换为CSS或LESS？

$('li').mouseover(function() {
    if ($('li ul li ul li:hover').length) {
        $('li ul li ul li:hover').css('background', 'red');
    } else if ($('li ul li:hover').length) {
        $('li ul li:hover').css('background', 'red');
    } else {
        $('li:hover').css('background', 'red');
    }
});
$('li').mouseout(function() {
    $(this).css('background', 'transparent');
});

此代码用于将元素悬停在列表中，如下所示：JSFIDDLE

Answer 1

如果我理解正确，你需要一个纯CSS解决方案（没有jQuery）。

嗯，这是可能的。

问题是在li:hover上使用背景也会给孩子们上色。但是当悬停孩子时，悬停也会影响父li。

所以你需要将文本包装在<span>：

中

＆＃13;

li span {
  display: block;
}
li span:hover,
li span:hover~ul {
  background: red;
}

＆＃13;

<ul>
  <li><span>Item 1</span></li>
  <li>
    <span>Group</span>
    <ul>
      <li><span>Item 2</span>
        <ul>
          <li><span>Item 2.1</span></li>
          <li><span>Item 2.2</span></li>
        </ul>
      </li>
      <li><span>Item 3</span></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

因为悬停时每种颜色都相同

li {
    background: transparent;
}
li:hover {
    background: red;
}

以上代码绰绰有余（据我所知）。

在scss中我们可以写与

相同

li {
   background: transparent;

   &:hover {
     background: red;
   }
}

我需要检查LESS是否会有任何差异。

Answer 3

看起来你只想在悬停时将列表更改为红色。

这样：

li{background-color:transparent;}
li:hover{background-color:#FF0000;}

但我会在课堂上加入它。

.li-container li{background-color:transparent;}
.li-container li:hover{background-color:#FF0000;}

如果你纯粹想用css那么。

li ul li ul li,li ul li,li{background-color:transparent;}
li ul li ul li:hover,li ul li:hover,li:hover{background-color:#FF0000;}

将jQuery代码转换为CSS或LESS

3 个答案: