Question

漂亮的海峡前锋：

默认情况下，始终显示2个箭头但在悬停时，只有活动的将有箭头。在鼠标离开时，箭头将再次显示。

请查看演示，此时，菜单始终处于活动状态

$('.subtext').mouseenter(function () {

    $(this).addClass('hover');

    if ($(this).hasClass('hover')) {
        $(this).addClass('yes');
    }

});

$('.subtext').mouseleave(function () {
    $(this).removeClass('hover');
    $(this).removeClass('yes');

});

Answer 1

您可以使用$('a:not(:hover)')选择光标未悬停的那个。

JS（jQuery）：

$('a').on('mouseover', function() {
    $('a:not(:hover)').removeClass('arrows');
}).on('mouseout', function() {
    $('a:not(:hover)').addClass('arrows');
});

这是fiddle。

Answer 2

我知道这很简单有点棘手，但有一些css和一些js：

.hovered .arrow{display:none;}
.hovered.hover .arrow{display:block;}

<强> JS：

$('ul > li').hover(function(){
    $('a').addClass('hovered');
}, function(){
    $('a').removeClass('hovered');
});


$('.subtext').hover(function(){
    $(this).addClass('hover');
}, function(){
    $(this).removeClass('hover');
})

演示： http://jsfiddle.net/33qeqap3/5/

Answer 3

所有内容都按预期运行，但您的伪选择器正在选择基本元素而不是悬停元素，请按如下方式调整CSS：

.subtext.hover:after{
    content:">";
    position:absolute;
}

Here's a jsFiddle

Jquery mouseenter状态显示活动状态并禁用无活动状态

3 个答案: