Change background color on mouseover and remove it after mouseout

Question

I have table which class is forum. My jquery code:

<script type="text/javascript">     $(document).ready(function() {         $('.forum').bind("mouseover", function(){             var color  = $(this).css("background-color");              $(this).css("background", "#380606");              $(this).bind("mouseout", function(){                 $(this).css("background", color);             })             })         }) </script> 

It perfectly works, but is it possible to do it in more efficient way without var color = $(this).css("background-color");. Just after mouseout leave the previous background-color and remove #380606? Thank you.

Answer 1

If you don't care about IE ≤6, you could use pure CSS ...

.forum:hover { background-color: #380606; } 

.forum { color: white; }  .forum:hover { background-color: #380606 !important; }  /* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */    #blue { background-color: blue; }

<meta charset=utf-8>    <p class="forum" style="background-color:red;">Red</p>  <p class="forum" style="background:green;">Green</p>  <p class="forum" id="blue">Blue</p>

---

With jQuery, usually it is better to create a specific class for this style:

.forum_hover { background-color: #380606; } 

and then apply the class on mouseover, and remove it on mouseout.

$('.forum').hover(function(){$(this).toggleClass('forum_hover');}); 

$(document).ready(function(){    $('.forum').hover(function(){$(this).toggleClass('forum_hover');});  });

.forum_hover { background-color: #380606 !important; }    .forum { color: white; }  #blue { background-color: blue; }

<meta charset=utf-8>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <p class="forum" style="background-color:red;">Red</p>  <p class="forum" style="background:green;">Green</p>  <p class="forum" id="blue">Blue</p>

---

If you must not modify the class, you could save the original background color in .data():

  $('.forum').data('bgcolor', '#380606').hover(function(){     var $this = $(this);     var newBgc = $this.data('bgcolor');     $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);   }); 

$(document).ready(function(){    $('.forum').data('bgcolor', '#380606').hover(function(){      var $this = $(this);      var newBgc = $this.data('bgcolor');      $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);    });  });

.forum { color: white; }  #blue { background-color: blue; }

<meta charset=utf-8>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <p class="forum" style="background-color:red;">Red</p>  <p class="forum" style="background:green;">Green</p>  <p class="forum" id="blue">Blue</p>

or

  $('.forum').hover(     function(){       var $this = $(this);       $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');     },     function(){       var $this = $(this);       $this.css('background-color', $this.data('bgcolor'));     }   );    

$(document).ready(function(){    $('.forum').hover(      function(){        var $this = $(this);        $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');      },      function(){        var $this = $(this);        $this.css('background-color', $this.data('bgcolor'));      }    );      });

.forum { color: white; }  #blue { background-color: blue; }

<meta charset=utf-8>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <p class="forum" style="background-color:red;">Red</p>  <p class="forum" style="background:green;">Green</p>  <p class="forum" id="blue">Blue</p>