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

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

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

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

---

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

使用

：悬停
：

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

参考：


div:悬停{
长方体阴影：0 5px红色；
}
11111
22222
33333
使用
：悬停
：

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

参考：


div:悬停{
长方体阴影：0 5px红色；
}
11111
22222
33333
尝试下一种方法：

CSS:

HTML:

请注意，不要使用“*”而是使用适当的类或元素标识符来限制事件范围。
尝试下一种方法：

CSS:

HTML:

请注意，不要使用“*”，而是使用适当的类或元素标识符来限制事件范围。
您可以像在本手册中一样使用jquery轻松地完成此操作。您可以像下面的fiddle一样使用jquery轻松地完成这项工作。想法很简单；首先从激活的类中删除该类，然后添加到新类


$（“.box”）.hover（函数（）{
$（“.box.activated”）.removeClass（“activated”）；
$（此）.addClass（“已激活”）；
});
。已激活{
长方体阴影：0 5px红色；
}
.盒子{
显示：内联块；
右边距：30px；
宽度：50px；
高度：50px；
线高：50px；
文本对齐：居中；
边框：1px实心#000；
}

框1
框2
box3
您可以像在这个提琴中一样使用jquery轻松地完成它。您可以像下面的fiddle一样使用jquery轻松地完成这项工作。想法很简单；首先从激活的类中删除该类，然后添加到新类


$（“.box”）.hover（函数（）{
$（“.box.activated”）.removeClass（“activated”）；
$（此）.addClass（“已激活”）；
});
。已激活{
长方体阴影：0 5px红色；
}
.盒子{
显示：内联块；
右边距：30px；
宽度：50px；
高度：50px；
线高：50px；
文本对齐：居中；
边框：1px实心#000；
}

框1
框2
框3
错误答案当我在悬停另一个div之前停止悬停一个div时，css不会保留任何内容。你是新来的吗？你不能只发表幼稚的文章answers@AsifAli好的，第二种解决方案怎么样？它不会去除阴影mouseout@abeyaz嗯，不确定需求，小更新。谢谢错误答案当我在悬停另一个div之前停止悬停一个div时，css不会保留任何内容。你是新来的吗？你不能只发表幼稚的文章answers@AsifAli好的，第二种解决方案怎么样？它不会去除阴影mouseout@abeyaz嗯，不确定需求，小更新。谢谢忽略前面的一个忘记连接到jquery中的检查这一个出现故障bitI已经更新了主注释。First vision并不总是最好的一个，之前的一个忘记连接到jquery，请检查这一个出现故障的bitI，我已经更新了主要评论。第一愿景并不总是最好的
.abc {
    box-shadow: 0 0 5px red; 
}

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

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