鼠标悬停问题和 jquery 问题答案

【问题标题】：Mouseover problems and jquery issue鼠标悬停问题和 jquery 问题
【发布时间】：2013-02-01 14:50:17
【问题描述】：

我对几个块的 jquery 效果有疑问。 Mouseenter 和 mouseleave 只对第一个 div 块起作用，而对其他所有块不起作用。

这里是 JS：

 $(document).ready(function() {

     $('#mainbox').mouseenter(
         功能 （） {
           $('#infobox').fadeIn();
         });
     $('#mainbox').mouseleave(
         功能 （） {
           $('#infobox').fadeOut();
         });

   });

还有块：

<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on      this one</div></div>

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

你们有什么想法是什么问题吗？

【问题讨论】：

ID 必须是唯一的！
您不能有多个具有相同 ID 的元素。每个文档的 ID 必须是唯一的。
jQuery Tooltip only works for first row of table的可能重复
更准确地说，您可以在一个文档中拥有多个 ID，但它不符合标准。像$('#mainbox') 这样的选择器只会返回第一个找到的...

标签： javascript jquery html css

【解决方案1】：

问题是：该选择器仅针对文档中第一个主框中的第一个信息框。

在API你可以阅读：

每个 id 值在文档中只能使用一次。如果超过一个元素被分配了相同的 ID，使用该 ID 的查询只会选择 DOM 中第一个匹配的元素。这种行为然而，不应依赖；一份文件有多个使用相同 ID 的元素无效。

这就是您的代码无法正常工作的原因。

提示：将 id 切换到类并绑定鼠标事件以在 div 内进行搜索，例如：

$('.mainbox').mouseenter(
  function () {
    $(this).find('.infobox').fadeIn();
  }); 

$('.mainbox').mouseleave(
  function () {
    $(this).find('.infobox').fadeOut();
});

【讨论】：

【解决方案2】：

将 id 更改为类：

<div class="mainbox"><div class="infobox" style="display: none;">first block - it works on      this one</div></div>


<div class="mainbox"><div class="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div class="mainbox"><div class="infobox" style="display: none;">3rd block - it doesn't work</div></div>

然后在 JS 中：

$(document).ready(function() {

 $('.mainbox').mouseenter(
     function () {
       $(this).find('.infobox').fadeIn();
     }); 
 $('.mainbox').mouseleave(
     function () {
       $(this).find('.infobox').fadeOut();
     });
});

【讨论】：