Question

我有几个具有相同ID（#viewport_outer）的div，在悬停时我试图显示放置在另一个div中的图标（＃icon-hover）:::我能够显示图标（不透明度1）:::

问题是我无法为每个（#viewport_outer）div :::绑定函数如果我将鼠标悬停在任何div（#viewport_outer）上，则第一个（顶部）显示图标（#icon-hover） div only :::

这是我的HTML：

<div id="viewport_outer" class="default">
    <div id="viewport">
        <div id="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

这是我的jQuery，我已经尝试改变它但只是无法让它工作:::任何帮助都会被赞赏:::

jQuery('#viewport_outer.default').hover(function() {
        jQuery('#icon-hover').css({opacity:1});},
    function() {
        jQuery('#icon-hover').css({opacity:0});
})

Answer 1

ID只能在任何给定的HTML文档中使用一次。

使用类名，因为它们可以应用于同一页面上的多个元素。

<div class="viewport_outer default">

Answer 2

ID必须是唯一的。改为使用class-attribute。

<div id="viewport_outer" class="outerElement default">
    <div class="viewport">
        <div class="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

使用Javascript：

jQuery('.outerElement').hover(function() {
        jQuery(this).find('.icon-hover').css({opacity:1});},
    function() {
        jQuery(this).find('.icon-hover').css({opacity:0});
})

我无法将jquery函数绑定到当前div

2 个答案: