Remove Jquery .css on unhover

Question

How to remove .css("background","red"); from (A.yuimenubaritemlabel.sub) element after unhovering .yuimenuitemlabel element ?

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

Answer 1

You need to reset the css property on mouse leave.

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

Use hover function if you have do do many things you can use hover.

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

Use hover function assuming you just need to change the css. You can make two class one is sub and other is newsub.

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