Zeige Details, wenn mouseover Element mit bestimmten Klasse

Question

Ich versuche, einen Block von Details zu erstellen, die nur angezeigt werden, wenn der Cursor auf einem Element der Liste ist, wenn das Element die Klasse 'hasDetails' hat. Ich habe versucht, 'mouseover' und 'mouseenter' zu verwenden, aber beide haben nicht funktioniert. Ich kann mir nicht vorstellen, warum das nicht funktioniert. Könnte jemand helfen?

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

Hier ist Ihr Problem: $('#details').css("display", "table");

Sie zielen auf eine ID, wenn es eine Klasse ist;)