How to optimize jQuery code for hovering elements that impact another element

Question

I picked up some code here (can't recall the link) but I'd like to see if it can be optimized. I have a table and in the first row there will be an image. In the 2nd row, there are cells that as you hover over, the image at the top changes. My JSFiddle is using colors for now. I'll swap in images later.

The rows have only 3 cells now, but once I figure this out, they will probably contain 12 or cells, so I need to display different images when hovering over all these cells.

The code works but I think if I get up to 12 cells/boxes, it won't be very efficient. How can this code be optimized?

// box 1
$('#whybox1').mouseover(function(){
    $('#whybox1').css('background-color', '#F7FE2E');
    $('#animalbox').css('background-color', '#F7FE2E');
});
$('#whybox1').mouseout(function(){
    $('#whybox1').css('background-color', '#d1e6f8');
    $('#animalbox').css('background-color', '#d1e6f8');
});

As a side point, I have seen implementations like this one using n:child, however that gets broken on older browsers that I must support.

http://jsfiddle.net/ccamacho/WfJvh/

Answer 1

Maybe something like this

http://jsfiddle.net/WfJvh/5/

That's just one way of doing this. The idea is that you add to your td some attribute that will hold some information (in this case color) and use that information while hovering.

Javascript:

$(window).load(function(){
   $(document).ready(function(){
       $('table td').mouseover(function(){
           var color = $(this).attr('data-color');   
           $(this).css('background-color', color);
           $('#animalbox').css('background-color', color);
       });
       $('table td').mouseout(function(){
           $(this).css('background-color', '#d1e6f8');
           $('#animalbox').css('background-color', '#d1e6f8');
       });   
   });
});​

html:

<table>
<tr>
<td colspan="3" id="animalbox">Animal Box</td>
</tr>
<tr>
<td id="whybox1" data-color="red">1</td>
<td id="whybox2" data-color="blue">2</td>
<td id="whybox3" data-color="green">3</td>
</tr>
</table>​

Answer 2

<table>
<tr>
<td colspan="3" id="animalbox">Animal Box</td>
</tr>
<tr id="boxes">
<td class="box" data-hoverColor="#F7FE2E" id="whybox1">1</td>
<td class="box" data-hoverColor="#F6CEE3" id="whybox2">2</td>
<td class="box" data-hoverColor="#81F7BE" id="whybox3">3</td>
</tr>
</table>​


$('#boxes').on('mouseenter mouseleave', '.box', function(e) {
if (e.type === 'mouseenter') {
    console.log()
    $(this).css('background-color', $(this).data('hoverColor'));
    $('#animalbox').css('background-color', $(this).data('hoverColor'));
}
else {
    $(this).css('background-color', '#d1e6f8');
    $('#animalbox').css('background-color', '#d1e6f8');
}
});

JSfiddle: http://jsfiddle.net/WfJvh/4/

Answer 3

Is there a reason you need to use mouseover and mouseout instead of just hover ? If you don't have to worry about IE6, then you can just use :hover in CSS to swap your styling.

#whybox1:hover {
    background-color: #d1e6f8;
}
#whybox1:hover {
    background-color: #F7FE2E;
}

If you need to add an image to the table on the fly and it can't be a background image, then you'll need to use JS. I would suggest something like this:

$('#whybox1').hover(function() {
    // this happens when you hover over the element
    $(this).addClass('hover');
},
function() {
    // this happens when you're no longer hovering over the element
    $(this).removeClass('hover');
});

Just add a class and modify the elements style for when that class is applied, then remove the class when hovering ends.

Even if you decide to use mouseover/out, it's not inefficient - what makes you think that? Unless you're attaching these events to hundreds (perhaps thousands) of elements, you won't see performance issues. 12 table cells will be just fine, regardless of how you go about it. I would suggest using CSS if that's a possibility.