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

首先创建一个名为highlight的css类，它表示要在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
});

悬停时并排三个分区

2 个答案: