使用 Jquery 的 Css 懸停效果

Question

.parent:hover.child

我正在嘗試做這件事，但僅限於 jQuery。

Answer 1

我建議使用 CSS 而不是 jquery（如果可能的話），否則你可以使用這樣的東西

$("div.myclass").hover(function() {
    $(this).css("background-color","red")
});

您可以根據需要更改選擇器。

如果你想對多個類使用這個懸停效果，你可以這樣使用

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

JS 小提琴示例

Answer 2

檢查下面的代碼片段以了解您的問題。 您可以將懸停事件與兩個函數一起用作參數。

 $(document).ready(function(){ $(".parent").hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); })

 .parent{ height:100px; width:200px; background-color:#F00; }.parent.child{ height:60px; width:160px; background-color:#0F0; margin:20px; }.parent.hover.child{ background-color:#00F; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child"> </div> <div>

祝你好運。