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

【问题标题】：Jquery mouseenter state show active state and disable no activeJquery mouseenter state 显示活动状态并禁用无活动
【发布时间】：2014-09-10 16:20:25
【问题描述】：

相当困难：

默认情况下总是显示 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');

});

【问题讨论】：

我完全不明白，为什么箭头会被隐藏，为什么它会“保持”活动状态？似乎完全符合我的预期！
你到底在问什么？如果您添加类潜文本并在 CSS 中声明 after ，它将永远不会消失。您需要在 jQuery jsfiddle.net/33qeqap3/2 中按需添加一个包含这些内容的类
另外，当你添加一个类时，你真的不必检查元素是否在下一行有那个类，这越来越没有意义了？
也许这就是你想要的 -> jsfiddle.net/33qeqap3/3
“两个链接都应该具有活动状态” - 你所说的活动状态到底是什么意思..？

标签： jquery mouseover mouseenter

【解决方案1】：

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

JS（jQuery）：

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

这是fiddle。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

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

Here's a jsFiddle

【讨论】：