如何在頭上使用onmouseover？

Question

我正在研究一個新的應用程序。它有共同的標題。 爲一個小的<div>類，我有以下代碼。

<div class="toolbox"> 
<span class="arrow"></span> 
<h3>User Menu</h3> 
<ul class="mail"> 
<span><img src="images/icons/help.png" alt="mail" style="float:left;"></span> 
<li> 
<a href="#"><strong>Help!</strong> 
<small> 
Application Help</small></a> 
</li> 
<span><img src="images/icons/about.png" alt="mail" style="float:left;"></span> 
<li> 
<a href="#"><strong>About</strong> 
<small> 
About 
</small></a> 
</li> 
<span><img src="images/icons/logout.png" alt="mail" style="float:left;"></span> 
</li> 
<a href="<c:url value="/j_spring_security_logout" />"><strong>Logout</strong> 
<small> 
Logout From The Application 
</small></a>\ 
</li> 
</ul> 
<span class="inbox" href="#"><sec:authentication property="principal.username" /> is logged-in</span> 
</div> 

點擊工具箱之後，出現一個菜單有3項， 我想用onmouseover這些項目。 請幫助

Answer 1

試試這個：

HTML：

<div class="toolbox"> 
    <span class="arrow"></span> 
    <h3>User Menu</h3> 
    <div id="showMenu"> 
     <ul class="mail"> 
      <span><img src="images/icons/help.png" alt="mail" style="float:left;"></span> 
      <li> 
       <a href="#"><strong>Help!</strong> 
       <small>Application Help</small></a> 
      </li> 
      <span><img src="images/icons/about.png" alt="mail" style="float:left;"></span> 
      <li> 
       <strong>About</strong> 
       <small> 
        About 
       </small> 
      </li> 
      <span><img src="images/icons/logout.png" alt="mail" style="float:left;"></span> 
      <li> 
       <a href="<c:url value="/j_spring_security_logout" />"> 
        <strong>Logout</strong> 
        <small> 
         Logout From The Application 
       </small></a> 
      </li> 
     </ul> 
     <span class="inbox" href="#"><sec:authentication property="principal.username" /> is logged-in</span> 
    </div> 
</div> 

CSS：

#showMenu 
{ 
    display:none; 
} 

腳本：

$(document).ready(function(){ 
    $('.toolbox').hover(); 
}); 

$('.toolbox').hover(function(){ 
    $('#showMenu').slideDown(); 
}); 

$('.toolbox').mouseout(function(){ 
    $('#showMenu').slideUp(); 
}); 

Fiddle