如何让一个css类一次只为一个对象工作？

Question

我希望一个 css 类一次只为一个对象工作。我只想在我将鼠标悬停在具有该类的对象上时激活它。当我的光标离开该对象时，该类仍应被激活。但是，当我将鼠标悬停在具有该类的第二个对象上时，它应该同时开始为该对象工作并停止为前一个对象工作。

我试图以这种方式实现的 css 是一组缩略图图像，如下所示

{
box-shadow: 0 0 5px red; 
}

当页面加载时，默认情况下，所有图像都不应激活此 css。我该怎么做？在这里打开任何类型的解决方案 css/javascript/jquery/plugin/anything elce。有人可以帮忙吗？

Answer 1

使用:hover:

:hover CSS 伪类在用户使用指针设备指定元素时匹配，但不一定激活它。它通常在用户将光标（鼠标指针）悬停在元素上时触发。

参考号：https://developer.mozilla.org/en/docs/Web/CSS/:hover

div:hover {
  box-shadow: 0 0 5px red;
}

<div>11111</div>
<div>22222</div>
<div>33333</div>

解决方案 2：使用mouseover 事件（或hover 作为@abeyaz 的答案），删除所有活动，然后将活动类添加到当前类。

hover() 函数更高级 - 它被构建为调用函数来处理 mouseenter 事件和 mouseleave 事件。这对于具有悬停和正常状态的 UI 元素（例如按钮）非常方便。

mouseover() 函数专门绑定到 mouseover 事件。最好的情况是您只关心鼠标何时越过边界进入一个元素，而您并不真正关心如果它离开会发生什么。它也是当你想在某个元素上触发事件时调用的函数。

jQuery 提供 hover() 作为处理常见 UI 悬停状态的便捷方式。

mouseover() 更多的是用于手动访问特定的浏览器事件。

参考号：https://www.quora.com/jQuery/jQuery-What-is-the-difference-between-the-hover-and-mouseover-functions

$('div').on('mouseover', function(){
  $('div').removeClass('active');
  $(this).addClass('active');
})

.active {
  box-shadow: 0 0 5px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>11111</div>
<div>22222</div>
<div>33333</div>

Answer 2

您可以使用 jquery 轻松做到这一点，就像在这个小提琴 https://jsfiddle.net/4f1g1yxf/ 中一样。您可以使用 jquery 轻松完成，如下面的小提琴。这个想法很简单；首先从已激活的类中删除该类，然后添加到新类中。

$(".box").hover(function(){
	$(".box.activated").removeClass("activated");
	$(this).addClass("activated");
});

.activated {
  box-shadow: 0 0 5px red; 
}
.box {
  display: inline-block;
  margin-right: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

Answer 3

尝试下一种方法：

CSS：

.abc {
    box-shadow: 0 0 5px red; 
}

HTML：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>

JS：

jQuery('*')
    .bind('mouseover', function (event) {
        var o = jQuery(this);
        if (!o.find('.abc').length) {
            o.addClass('abc');
        }
    })
    .bind('mouseout', function () {
        jQuery(this).removeClass('abc');        
    });

附：而不是 '*' 放置适当的类或元素标识符来限制事件范围。