0

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

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

这是我的 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});
})
4

2 回答 2

2

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

改用类名，因为这些可以应用于同一页面上的多个元素。

<div class="viewport_outer default">
于 2011-11-07T17:45:06.103 回答
1

ID 必须是唯一的。请改用类属性。

<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});
})
于 2011-11-07T17:44:34.757 回答