特定のクラスを持つmouseoverアイテムの詳細を表示

Question

アイテムにクラス 'hasDetails'がある場合、カーソルがリストのアイテムにあるときにのみ表示される詳細ブロックを作成しようとしています。私は 'mouseover'と 'mouseenter'を使ってみましたが、どちらもうまくいきませんでした。私はなぜこれが動作していないのか理解できません。誰でも助けてくれますか？

jQueryの

$(document).ready(function() { 
     $('#list').find('.listItem').mouseover(function(){ 
      if($(this).hasClass('hasDetails')) { 
       $('#details').css("display", "table"); 
      }; 
     }); 
    }); 

HTML

<div id="details"> 
     <p>Details</p> 
    </div> 

    <ul id="list"> 
     <li class="listItem hasDetails"> 
      <p>ITEM</p> 
     </li> 
     <li class="listItem"> 
      <p>ITEM</p> 
     </li> 
     <li class="listItem hasDetails"> 
      <p>ITEM</p> 
     </li> 
     <li class="listItem"> 
      <p>ITEM</p> 
     </li> 
     <li class="listItem"> 
      <p>ITEM</p> 
     </li> 
    </ul> 

CSSここで

.details{ 
     display: none; 
    } 

Answer 1

$(document).ready(function() { 
     $('#list').find('.listItem').mouseover(function(){ 
      if($(this).hasClass('hasDetails')) { 
       $('#details').show(); 
      }; 
     }); 
    }); 

Answer 2

はあなたの問題です： $('#details').css("display", "table");

あなたがクラスのときにIDをターゲットにしています;）