Change background color on mouseover and remove it after mouseout

Question

I have table which class is forum  My jquery code    lt script type  text javascript  gt        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                                             lt  script gt    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

User · Answer

Set the original background-color in you CSS file:

.forum{
    background-color:#f0f;
}?

You don't have to capture the original color in jQuery. Remember that jQuery will alter the style INLINE, so by setting the background-color to null you will get the same result.

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});?

User · Answer

After lot of struggle finally got it working    Perfectly tested   The below example will also support the fact that color of already clicked button should not be changes  JQuery Code  var flag   0     Flag is to check if you are hovering on already clicked item     a   click function            a   removeClass  YourColorClass          this  addClass  YourColorClass        flag 1           a   mouseover function         if    this  hasClass  YourColorClass              flag 1            else            this  addClass  YourColorClass                   a   mouseout function         if  flag    0              this  removeClass  YourColorClass              else          flag   0

User · Answer

This is my solution      document  ready function            td    on        click   clicked       mouseover   hovered       mouseout   mouseout      var flag 0   function hovered        this  css  background     380606       function mouseout      if  flag    0       this  css  background     ffffff      else     flag 0       function clicked        this  css  background    000000      flag 1

User · Answer

If you don t care about IE  6  you could use pure CSS       forum hover   background-color   380606       x000D   x000D   forum   color  white    x000D   forum hover   background-color   380606  important    x000D     we use  important here to override specificity  see http   stackoverflow com q 5805040     x000D   x000D   blue   background-color  blue    x000D   lt meta charset utf-8 gt  x000D   x000D   lt p class  forum  style  background-color red   gt Red lt  p gt  x000D   lt p class  forum  style  background green   gt Green lt  p gt  x000D   lt p class  forum  id  blue  gt Blue lt  p gt  x000D   x000D   x000D      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          x000D   x000D    document  ready function    x000D        forum   hover function     this  toggleClass  forum hover       x000D      x000D   forum hover   background-color   380606  important    x000D   x000D   forum   color  white    x000D   blue   background-color  blue    x000D   lt meta charset utf-8 gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  forum  style  background-color red   gt Red lt  p gt  x000D   lt p class  forum  style  background green   gt Green lt  p gt  x000D   lt p class  forum  id  blue  gt Blue lt  p gt  x000D   x000D   x000D      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            x000D   x000D    document  ready function    x000D        forum   data  bgcolor     380606   hover function    x000D      var  this     this   x000D      var newBgc    this data  bgcolor    x000D       this data  bgcolor    this css  background-color    css  background-color   newBgc   x000D        x000D      x000D   forum   color  white    x000D   blue   background-color  blue    x000D   lt meta charset utf-8 gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  forum  style  background-color red   gt Red lt  p gt  x000D   lt p class  forum  style  background green   gt Green lt  p gt  x000D   lt p class  forum  id  blue  gt Blue lt  p gt  x000D   x000D   x000D    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                      x000D   x000D    document  ready function    x000D        forum   hover  x000D      function    x000D        var  this     this   x000D         this data  bgcolor    this css  background-color    css  background-color     380606    x000D         x000D      function    x000D        var  this     this   x000D         this css  background-color    this data  bgcolor     x000D        x000D           x000D      x000D   forum   color  white    x000D   blue   background-color  blue    x000D   lt meta charset utf-8 gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  forum  style  background-color red   gt Red lt  p gt  x000D   lt p class  forum  style  background green   gt Green lt  p gt  x000D   lt p class  forum  id  blue  gt Blue lt  p gt  x000D   x000D   x000D

User · Answer

HTML    lt div id  id  gt   lt  div gt   lt div id  hiddenDiv  style  display none   gt  lt  div gt    jQuery       id   hover function            hiddenDiv   css  display   block           function            hiddenDiv   css  display   none

User · Answer

This should be set directly in the CSS    forum  background-color   123456   forum hover  background-color   380606    If you are worried about the fact the IE6 will not accept hover over elements which are not links  you can use the hover event of jQuery for compatibility

User · Answer

Try this   its working and simple  HTML                        lt html gt   lt head gt  lt  head gt   lt body gt       lt div class  forum  gt          test      lt  div gt   lt  body gt   lt  html gt                                                 Javascript    document  ready function         var colorOrig     forum   css  background-color            forum   hover      function               mouse over           this  css  background     ff0          function               mouse out           this  css  background   colorOrig                 css     forum      background  f0f       live demo  http   jsfiddle net caBzg

[jquery] Change background color on mouseover and remove it after mouseout

Examples related to jquery

Examples related to mouse

Examples related to mouseover

Examples related to mouseout