javascript - 将 jQuery 代码转换为 CSS 或 LESS

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 上使用背景也会给 child 上色。但是当悬停 child 时，悬停也会影响 parent li .

因此您需要将文本包装在 <span> 中:

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

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