Question

How do I make it so that when the mouse is hovered over one div, the whole row highlights and allows the user to click it? I am totally confused about whether to use Javascript or Jquery.

Here is a link to a preview and viewing of the code: http://jsfiddle.net/cMpaE/

By the way, I am using these as listview type of control, so there will be multiple of these on one page.

Thanks for your time.

Answer 1

With jQuery:

Wrap the row in a container div, then toggle a class whenever you enter / leave the div

Css:

.hover > div {
    background-color: #0f0 !important; /* Only need !important to override your inline css */
}

jQuery:

$('#logoBlock,#promotionBlock,#descriptionBlock').hover(function() {
    $(this).parent().toggleClass('hover');
});

See the working example here: http://jsfiddle.net/m22Gu/2/