如何申请课程 <li> 当鼠标悬停在上面时？

Question

我定义了一个CSS类“ active”，并且仅在将鼠标悬停在其上时才希望将该类应用于<li>标记。 怎么做？

这是一个Bootstrap示例：

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

当鼠标悬停在任何<li>上时 ，在其上应用“活动”类。

希望CSS可以提供​​这样的内容，因为我想避免一次又一次地编写相同的纯CSS文本。

.list-group-item:hover
{
    include .active;
}

谢谢。

Answer 1

为什么要创建一个.active类？
您应该这样做：

.list-group-item:hover {
   /* body of the active class here*/
}

这样，您无需为悬停创建单独的类。

Answer 2

您应该避免只使用CSS来使用不必要的javascript，就像其他人已经指出的那样

但是尽管如此，jquery的方式是

$('.list-group-item').hover(function(){
    $(this).addClass('active');
},function(){
    $(this).removeClass('active');
});

第一个块是鼠标悬停在元素上，第二个块是离开元素时https://jsfiddle.net/o9na7ps0/1/

Answer 3

尝试这个：

HTML <li class="active list-group-item">First item</li>

CSS li.active:hover {...}

Answer 4

徘徊在每个李

li:hover{
  background-color: #ffeeff;
}

将鼠标悬停在类列表组项目上

.list-group-item:hover{
  background-color: #ffeeff;
}

使用类list-group-item在li上悬停

li.list-group-item:hover{
  background-color: #ffeeff;
}

Answer 5

像下面的示例一样，将此.list-group-item:hover{color: white;}到您的CSS中，例如：https://jsfiddle.net/7sud8341/2/