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

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

如何让css类一次只能处理一个对象？

3 个答案: