的Jquery的mouseenter狀態顯示激活狀態，並禁用不活躍

兩岸漂亮的向前：的Jquery的mouseenter狀態顯示激活狀態，並禁用不活躍

默認情況下，總會有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'); 

});

來源

2014-09-10 user3699998

我不完全沒有辦法，爲什麼會隱藏箭頭，爲什麼它會「保持」活躍？似乎完全按照我的預期工作！ – adeneo 2014-09-10 16:23:55

你到底在問什麼？如果你添加class subtext，並且你在CSS中聲明瞭after，它將永遠不會消失。您需要在jQuery中根據需要添加一個類，該類需要http://jsfiddle.net/33qeqap3/2/ – 2014-09-10 16:24:15

另外，當您添加一個類時，您並不需要檢查元素是否具有該類下一行，這使得越來越少的感覺？ – adeneo 2014-09-10 16:25:20

您可以使用$('a:not(:hover)')來選擇光標未懸停的位置。

JS（jQuery的）：

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

這裏有一個fiddle。

來源

2014-09-11 09:38:50 flowstoneknight

-1

一切運行正常相對於懸停元素，請按如下方式調整CSS：

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

Here's a jsFiddle

來源

2014-09-10 16:24:26 Ohgodwhy

很容易有點棘手，我知道，但有一些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/

來源

2014-09-11 10:23:18 DD77

的Jquery的mouseenter狀態顯示激活狀態，並禁用不活躍

回答

相關問題