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ドキュメントで1回だけ使用する必要があります。

クラス名は同じページの複数の要素に適用できるため、代わりにクラス名を使用してください。

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

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