Question

我正在使用JavaScript并尝试显示有关鼠标悬停的所有元素信息。到目前为止，我只得到第一个元素信息，第二个不活跃。如何搞定所有元素？

这是JavaScript代码：

$('#user').hover(function() {
    $('#popup').show();
}, function() {
    $('#popup').hide();
});

<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div id='user'>I am a user. Move your mouse over me</div>

<div>I a piece of useless information. No use hovering over me.</div>

http://jsfiddle.net/Hyw7Z/1/

Answer 1

如果没有这样的事情发生，你不能在多个元素上对“id”使用相同的值。相反，使用“class”

<div class="user" ... >

然后，在JavaScript中：

$('.user').hover(function() { ...

同样适用于“popup”，但为此你需要这样的东西：

$('.user').hover(function() {
  $(this).next('.popup').show();
}, function() {
  $(this).next('.popup').hide();
});

那将在h <div>之后找到下一个元素，它有“弹出”类，并显示/隐藏它。如果没有这样的元素，什么都不会发生。

Answer 2

您正在使用ID选择器。 ID只允许在页面上放置一次。您可以使用类选择器。

<div class='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div class='user'>I am a user. Move your mouse over me</div>

$('.user').hover(function() {
    $('#popup').show();
}, function() {
    $('#popup').hide();
});

JSFiddle

悬停仅适用于一个元素

2 个答案: