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

如何在标题上使用onmouseover？

1 个答案: