jquery - 取消悬停时删除 Jquery .css

Question

如何删除 .css("background","re​​d"); 从 (A.yuimenubaritemlabel.sub) 元素取消悬停 .yuimenuitemlabel 元素后？

$(document).ready(function(){
  $(".yuimenuitemlabel").mouseover(function(){
   $("A.yuimenubaritemlabel.sub").css("background","red");
  });
});

Answer 1

您需要在鼠标离开时重置 css 属性。

$(".yuimenuitemlabel").mouseover(function(){
   $("A.yuimenubaritemlabel.sub").css("background","red");
}).mouseleave(function(){
     $("A.yuimenubaritemlabel.sub").css("background","");
});

如果您做了很多可以使用悬停的事情，请使用悬停功能。

$(".yuimenuitemlabel").hover(function(){
   $("A.yuimenubaritemlabel.sub").css("background","red");
}, function(){
     $("A.yuimenubaritemlabel.sub").css("background","");
});

假设您只需要更改 css，请使用悬停功能。您可以制作两个类，一个是 sub，另一个是 newsub。

$(".yuimenuitemlabel").hover(function(){
     $("A.yuimenubaritemlabel.sub").toggleClass("newsub");
});

Answer 2

添加/删除类是更好的做法

$(document).ready(function(){
    $(".yuimenuitemlabel").hover(function(){
        $("a.yuimenubaritemlabel.sub").toggleClass('hoverclass');
    });
});

并使用一个类

.hoverclass{
   background-color:red;
}