jquery関数を現在のdivにバインドできません

Question

同じID（#viewport_outer）を持つ複数のdivがあり、ホバー上に別のdiv（＃icon-hover）に配置されたアイコンを表示しようとしています： ::アイコン（不透明度1）を取得できます:::

問題はすべて（#viewport_outer）div :::のいずれかに関数をバインドできません。 DIV（#viewport_outer）アイコン（＃アイコン-ホバリング）が最初（トップ）に示しDIVのみ:::

は、ここに私のHTMLです：

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

は、ここに私のjQuです私はそれを変更しようとしましたが、うまくいきません:::どんな助けもありがとうございました:::

Answer 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}); 
}) 

Answer 2

IDのが唯一の任意のHTML文書で一度使用されなければなりません。

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

<div class="viewport_outer default">