Question

When a user hover overs one of the items such as Research, Brand Strategy, Audience Engagement the background colour in the bottom section changes via a inline style.

http://www.odopod.com/work/tags/strategy/

I was wondering, how it is done or which Jquery plugin they were using?

Many thanks!

Answer 1

This isn’t a plugin, this is done through good old plain jQuery:

<div class='something'>my text goes here blah blah blah</div>
<div class='somethingelse'>my background color goes here</div>

Then with jQuery:

$(function() {
    $('div.something').hover(function() {
        $(this).next('div.somethingelse').css('background-color','red');
    }, function() {
        $(this).next('div.somethingelse').css('background-color','blue');
    });
});

Depending on what you want you could set up the HTML in many different ways. You would then use whatever DOM traversing function is appropriate to find the associated DIV and manipulate it’s CSS accordingly.