Javascript 三个潜水艇并排悬停

如何使鼠标悬停在一个div上时，整行高亮显示并允许用户单击它？我完全不知道是使用Javascript还是Jquery

以下是指向代码预览和查看的链接：

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

---

谢谢您的时间。

首先创建一个名为

highlight

的css类，该类表示您希望在div上显示的样式，以及悬停时列表框该行中的所有其他div

然后，在生成的每个div上，使用数据属性标识它位于列表框的哪一行，并为其提供相应的css类：

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

---

对于问题的第二部分，用户只有在鼠标位于div上时才能单击它，对吗？因此，只需在行的div上附加一个click处理程序

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

使用jQuery：

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

Css:

jQuery：

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

---

请参见此处的工作示例：

谢谢您的回答，以及有用的JSFIDLE示例。谢谢您的回答，我现在必须阅读CSS中的ID:）我一直在环顾四周，似乎找不到任何可以理解的解释来解释您刚才所说的将数据行nums分配给div的内容。我确实需要一些方法来分配每个div（如您上面所示）根据我数据库中的MYSQL ID创建一个ID，这样当用户单击listview时，我就可以根据该ID显示相关内容。@tushar747-这是你必须自己做的事情，但我认为jhof的答案更好

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

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