Question

我定义了一个CSS类＆＃34;有效＆＃34;，并且只有当鼠标悬停时才想在＆lt; li＆gt; 标记上应用此类在上面。怎么做？

这是一个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>

当鼠标悬停在任何＆lt; li＆gt; 上时，请应用class＆＃34; active＆＃34;在上面。
希望CSS可以提供这样的东西，因为我想避免一次又一次地编写相同的纯CSS文本。

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

感谢。

Answer 1

为什么要创建课程.active？
你应该这样做：

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

这样，你不需要为悬停创建一个单独的类。

Answer 2

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

但仍然是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

悬停在每一个

上

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

将鼠标悬停在class list-group-item

上

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

使用class list-group-item

悬停在li上

def get_feedback
  ...
  @employee = Employee.find_by(:name)
  if @employee.blank?
     ...
  else
    @client_feedback = Feedback.new(:screen_name => @screen_name, :feedback => @feedback)
    @client_feedback.employee_id = @employee.id
    @client_feedback.client_id   = @employee.client_id
    @client_feedback.location_id = @employee.location_id
    @client_feedback.save

Answer 5

将此.list-group-item:hover{color: white;}添加到您的CSS中，例如此示例https://jsfiddle.net/7sud8341/2/

如何在鼠标悬停在<li>上时应用课程？

5 个答案: