hover effect jQuery

Question

I have a bunch of li elements that I want to alternate in color using odds and evens, and then highlight based on mouse hover. In order to un-highlight I need to keep track of what the color used to be, odd or even. To do this when I apply the highlight color, I first set an arbitrary attribute to it. Are there any downsides to doing it this way? Is there a better way? Here's the code:

<script type="text/javascript">
var init = function(event){
$("li:odd").css({'background-color' :  '#eeeeee', 'font-weight' : 'bold'});
$("li:even").css('background-color', '#cccccc');  
    //initial colors setup

    $("li").hover(
 function ()   //hover over
 {
  var current = $(this);
  current.attr('old-background', current.css('background-color'));
  current.css('background-color', '#ffee99');

 }
 , function()  //hover out
{
 var current = $(this);
 current.css('background-color', current.attr('old-background'));
})

}
$(document).ready(init);
</script>

So is there a better way to do this?

Answer 1

You should use addClass and removeClass to achieve this, instead of manipulating the CSS directly.

<style>
  li.hover {
    background-color: #ffee99 !important;
  }
</style>

<script type="text/javascript">
  var init = function(event){
    $("li:odd").css({'background-color' :  '#eeeeee', 'font-weight' : 'bold'});
    $("li:even").css('background-color', '#cccccc');  
    //initial colors setup

    $("li").hover(
      function ()   //hover over
      {
        $(this).addClass('hover');

      }
      , function()  //hover out
      {
        $(this).removeClass('hover');
      })
    }
    $(document).ready(init);

Answer 2

I agreen with benlumley, you should use addClass/removeClass methods.

Your CSS may look like,

li {
    font-weight: bold;
}

li.odd {
    background-color: '#eee';
}

li.even {
    background-color : '#ccc';
}

li.hover {
    background-color : '#ffee99';
}

Your init function will now look like,

var init = function(event)
{
    $('li:odd').addClass('odd');
    $('li:odd').addClass('even');

    $('li').hover(  function()
                    {
                        $(this).addClass('hover');
                    },
                    function()
                    {
                        $(this).removeClass('hover');
                    }
                   );

}

This code has advantage that if you want to change the styling of how those list items look, you can go to your CSS code and change the colors without touching your JS code!

Answer 3

You could introduce a CSS class called highlighted and call current.addClass('highlighted') to add on hover over and current.removeClass('highlighted') to remove the class on hover out. I assume you are also adding odd and even classes into your CSS file.

<script type="text/javascript">
var init = function(event){
    //initial colors setup
    $("li:odd").addClass('odd');
    $("li:even").addClass('even');  

    $("li").hover(
        function ()   //hover over
        {
                $(this).addClass('highlighted');

        }
        , function()  //hover out
        {
                $(this).removeClass('highlighted');
        })

}
$(document).ready(init);
</script>

highlighted should be declared after even and odd classes in your file in order to be able to override the default colors.

Answer 4

like the other yo can also use

$("li:odd").toggleClass("odd");

or $("li:even").toggleClass("odd");

if you like to change the color of the first item. (also you can use first I think)