Question

我用＆lt;做了一个菜单divs＆gt;并使用mouseover mouseout函数来追加和删除一个舌头（如每个菜单图标的描述）。我遇到的问题是当我将鼠标悬停在舌头上时，它会（正确地）执行按钮的鼠标输出功能并移除舌头。

我该怎样防止这种情况？谢谢！

$('#wrapper').on('mouseover', '.1, .2, .3, .4, .5', function(){
    var tongue = '<div class = "tongue">'+$(this).attr('value')+'</div>';
    $(tongue).appendTo($(this)).animate({width:"toggle"});
});
$('#wrapper').on('mouseout', '.1, .2, .3, .4, .5', function(){
    var that = $(this);
    $('.tongue').animate({width:"toggle"},function(){
        that.children('.tongue').remove();
    });
});

奖励：文本也受宽度动画的影响。有什么方法可以解决这个问题吗？

Answer 1

<强> DEMO

您可以执行以下操作以使代码按预期工作。

使用mouseleave事件代替mouseout这将确保子元素被检测为父元素的一部分，并且事件仅在鼠标离开元素及其子元素时触发。
同样使用mouseover更改mouseenter事件只有当光标输入元素或其子元素时，才会触发此事件。
要避免折叠文字，请在white-space: nowrap;课程上使用.tongue。

<强> JS：

$('#wrapper').on('mouseenter', '.1, .2, .3, .4, .5', function () {
    var tongue = '<div class = "tongue">' + $(this).attr('value') + '</div>';        
    $(tongue).appendTo($(this)).animate({
        width: "toggle"
    });
});
$('#wrapper').on('mouseleave', '.1, .2, .3, .4, .5', function () {
    var that = $(this);
    $('.tongue').animate({
        width: "toggle"
    }, function () {
        that.children('.tongue').remove();
    });
});

P.S：尽量避免像.1, .2, .3这样的类名，它们可能在java脚本中工作，但它们不适用于CSS。

CSS不允许以数字开头的类名，而是可以尝试.n_1, .n_2, .n_3 ....

Answer 2

根据您所需的支持级别，您根本不需要JavaScript 我做了一个例子，其中我稍微改变了HTML结构，使其更具语义IMO 动画在旧IE中不起作用，但功能会起作用（IE8）。

HTML：

<ul class='wrapper'>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
</ul>

CSS：

.wrapper {
    width:50px;
    margin-left:40%;
    list-style: none;
    counter-reset: button-number
}

.button {
    counter-increment: button-number;
    width:50px;
    height:50px;
    background-color:#ccc;
    float: left;
    cursor:pointer;
    position: relative;
}

.button:before, .button:after {
    content:"Button number " counter(button-number);
    width:300px;
    height:50px;
    position:absolute;
    right: 50px;
    visibility: hidden;
}

.button:before {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left;
    transform: scaleX(0);
    transform-origin: left;
    background-color:#000;
    color:#fff;
    -webkit-transition: -webkit-transform .4s, visibility 1s;
    transition: transform .4s, visibility 1s;
}

.button:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
}

.button:hover:after {
    width: 300px;
}

jsfiddle

注意：

：元素之后是为了防止＆＃34;舌头＆＃34;如果鼠标立即离开，则消失。
动画transform代替width更有利于提高性能（不会重新绘制元素）并消除动画期间奇怪的文本换行。

jQuery菜单幻灯片悬停故障

2 个答案: