悬停时并排三个分区

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.

如何使鼠标悬停在一个div上，整个行突出显示并允许用户单击它？我对是否使用Javascript或Jquery感到困惑。

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

以下是预览和查看代码的链接：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.

顺便说一句，我使用这些作为listview类型的控件，因此在一个页面上将有多个这些。

Thanks for your time.

谢谢你的时间。

2 个解决方案

#1

With jQuery:

使用jQuery：

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

将行包装在容器div中，然后在进入/离开div时切换类

Css:

CSS：

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

jQuery:

jQuery的：

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

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

请参阅此处的工作示例：http：//jsfiddle.net/m22Gu/2/

#2

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.

首先创建一个名为highlight的css类，它表示要在div上显示的样式，以及悬停时列表框中该行的所有其他div。

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属性标识列表框的哪一行，并为其指定相应的css类：

<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,

对于问题的第二部分，用户只能在鼠标悬停时单击div，对吧？所以只需将一个点击处理程序附加到行的div中，

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

#1