如何使css类一次仅对一个对象起作用？

Question

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

我正在尝试以这种方式实现的CSS是一组缩略图，如下所示

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

页面加载时，默认情况下，没有图像应激活此CSS。 我该怎么做？ 在此处打开任何类型的解决方案css / javascript / jquery / plugin /其他任何方法。 有人可以帮忙吗？

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');        
    });

PS代替'*'放置适当的类或元素标识符以限制事件范围。