如何使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代替'*'放置適當的類或元素標識符以限制事件范圍。