javascript - 如何让一个 CSS 类一次只为一个对象工作？

Question

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

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

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

在页面加载时，所有图像都不应默认激活此 css。我该怎么做？在此处打开任何类型的解决方案 css/javascript/jquery/plugin/anything elce。谁能帮忙？

Answer 1

使用 :hover:

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

REF: 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 的回答)，删除所有 Activity ，然后将 Activity 类添加到当前类。

The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (e.g. a button.)

The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.

jQuery provides hover() as a convient way to handle common UI hovering states.

mouseover() is more for manually accessing the specific browser event.

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