CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tushar747
tushar747

Reputation: 683

Three Divs Side By Side on Hover

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.

Upvotes: 1

Views: 258

Answers (2)

jhoff
jhoff

Reputation: 716

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/

Upvotes: 2

Adam Rackis
Adam Rackis

Reputation: 83358

First create a css class called highlight that represents the style you want to show on the div, and all the other divs in that row of the listbox when hovered.

Then, on each div that's generated, identify which row of your listbox it's on with a data attribute, and give it a corresponding css class:

<div data-rownum="2" class="row2" ...

Then

$("div[class *= 'row']").hover(function() {
    $(".row" + $(this).data("rownum")).addClass("highlight");
}, function() {
    $(".row" + $(this).data("rownum")).removeClass("highlight");
});

For the second part of your question, the user will only be able to click on a div when the mouse is over it, right? So just attach a click handler to your rows' divs, 

$(document).on("click", "div[class *= 'row']", function() {
    //click handler
});

Upvotes: 1

Related Questions