悬停时并排三个分区

Question

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

这是预览和查看代码的链接： http : //jsfiddle.net/cMpaE/

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

谢谢你的时间。

Answer 1

使用jQuery：

将行包装在容器div中，然后在进入/离开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');
});

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

Answer 2

首先创建一个名为CSS类highlight列表框的该行表示要显示的DIV的风格，和所有其他的div徘徊时。

然后，在生成的每个div上，使用data属性标识列表框所在的行，并为其指定一个对应的CSS类：

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

然后

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

---

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

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