如何讓css類一次只爲一個對象工作？

Question

我想要一個css類一次只能爲一個對象工作。我只想將鼠標懸停在該類的對象上時才激活它。當我的光標離開該對象時，該類應該仍然被激活。但是當我將鼠標懸停在該類的第二個對象上時，它應該同時開始爲該對象工作，並停止爲之前的對象工作。

的CSS我想實現這種方式是一組縮略圖，並且是如下

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

無圖像的應該有這樣的CSS默認頁面加載時被激活。我該怎麼做？在這裏打開任何一種解決方案css/javascript/jquery/plugin /任何東西elce。誰能幫忙？

Answer 1

使用:hover：

的：懸停CSS僞類匹配當用戶指定用定點設備的元素，但並不必然激活它。它通常在用戶通過光標（鼠標指針）懸停在元素上時觸發。

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的答案），刪除所有活動狀態，那麼活動類添加到當前一個。

hover（）函數更高級別 - 它的構建方法是調用函數來處理mouseenter事件和mouseleave事件。對於具有懸停和正常狀態的UI元素（例如按鈕）來說非常方便。

mouseover（）函數專門綁定到mouseover事件。對於只在鼠標穿過邊界進入元素時才關心的情況，以及在離開時不太在意會發生什麼情況。當您想要在某個元素上觸發事件時，它也是調用的函數。

jQuery提供hover（）作爲處理常見UI懸停狀態的簡便方法。

mouseover（）更適用於手動訪問特定的瀏覽器事件。

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>

Answer 2

嘗試下一個方法：

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

附：而不是'*'放置適當的類或元素標識符來限制事件範圍。

Answer 3

你可以很容易地使用jquery，就像這個小提琴https://jsfiddle.net/4f1g1yxf/一樣。你可以使用jquery輕鬆完成，就像下面的小提琴一樣。這個想法很簡單，先從激活的類中移除該類，然後添加到新的類中。

$(".box").hover(function(){ 
 
\t $(".box.activated").removeClass("activated"); 
 
\t $(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>