Question

我知道这应该是非常简单的，但我无法弄清楚它是什么，因为我相信我的代码和语法是正确的...基本上我希望我的下拉菜单在用鼠标悬停在顶部后淡入淡出当鼠标离开时菜单和fadeOut ...让我烦恼的是fadeIn正在工作，但是fadeOut不是

<ul class="menu">
    <a href="index.php"><li>HOME</li></a>
    <a href="about.php"><li>ABOUT US</li></a>
    <li class="work">
        OUR WORK
        <ul class="submenu">
            <a href="webdesign.php">
                <li>Webdesign</li>
            </a>
        </ul>
    </li>
    </a>
    <a href="clients.php"><li>CLIENTS</li></a>
    <a href="contact.php"><li>CONTACT</li></a>
</ul>

$('.work').mouseover(function() {
    $('.submenu').fadeIn(400);
});

$('.work').mouseout(function() {
    $('.submenu').fadeOut(400);
});

Answer 1

您的标记无效。 ul元素只能将li元素作为直接子元素。将标记更改为：

<ul class="menu">
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li class="work">
    OUR WORK
    <ul class="submenu">
        <li><a href="webdesign.php">
            Webdesign
        </a></li>
    </ul>
</li>

<li><a href="clients.php">CLIENTS</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>

对于事件绑定，您有mouseout事件的语法错误。您也可以使用.hover()代替mouseover和mouseleave事件。

$('.work').hover(function(){
    $('.submenu').fadeIn(400);
},function(){
    $('.submenu').fadeOut(400);
})

Answer 2

HTML和JS中有几个语法错误。首先，a元素应位于li：

中

<ul class="menu">
    <li><a href="index.php">HOME</a></li>
    <li><a href="about.php">ABOUT US</a></li>
    <li class="work">
        OUR WORK
        <ul class="submenu">
            <li><a href="webdesign.php">Webdesign</a></li>            
        </ul>
    </li>
    <li><a href="clients.php">CLIENTS</a></li>
    <li><a href="contact.php">CONTACT</a></li>
</ul>

然后mouseout声明后面不应该有一组单独的括号。实际上，您可以使用hover来缩短逻辑：

$('.work').hover(function() {
    $('.submenu').fadeIn(400);
}, function() {
    $('.submenu').fadeOut(400);
});

Example fiddle

fadeIn工作，但fadeOut没有

2 个答案: