鼠标悬停问题和 jquery 问题

Mouseover problems and jquery issue

本文关键字：问题 jquery 鼠标 悬停      更新时间：2023-09-26

我对几个块的jquery效果有问题。鼠标输入和鼠标离开仅适用于第一个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>

你们知道问题是什么吗？

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

在 API 中，您可以阅读：

每个 id 值只能在文档中使用一次。如果超过 一个元素被分配了相同的 ID，使用该 ID 的查询 将仅选择 DOM 中第一个匹配的元素。此行为 但是，不应依赖;包含多个文档的文档 元素使用相同 ID 无效。

这就是你的代码不起作用的原因。

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

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

将 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();
     });
});
相关文章：