Jquery鼠标中心状态显示活动状态，并禁用无活动状态。

Question

美丽的海峡向前：

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

请看一下演示，现在，菜单总是处于活动状态。

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

$('.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');
});

这是一个小提琴。

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

一切都按预期运行，但您的psuedo选择器选择的是基本元素，而不是悬停元素，请按以下方式调整CSS：

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

这是一个jsFiddle