如果hasClass然後觸發鼠標懸停鼠標

我想添加一個鼠標懸停或懸停功能，當它有一個div sticky。所以當導航粘滯時，homepage-sidemenu應該得到display:none;。當鼠標懸停時，.homepage-sidemenu.sticky應該變爲可見，並且在鼠標懸停時不可見。如果hasClass然後觸發鼠標懸停鼠標

我認爲這很簡單，只是添加一個懸停功能，但不知何故我錯過了一些東西，因爲它沒有做我想做的事。粘性類添加了滾動功能。

一個fiddle here證明發生了什麼

所以我有什麼是這樣的：

<div id="nav"> 
<ul class="menu"> 
    <li class="highlight"><a href="">categories</a></li> 
</ul> 
</div> 

<div id="content"> 
<div class="homepage-sidemenu"> 
    <ul> 
    <li class="highlight">...</li> 
    </ul> 
</div> 
</div> 

var fixmeTop1 = $('#nav').offset().top; 
var fixmeTop = $('.homepage-sidemenu').offset().top + 100; 
$(window).scroll(function() { 
    var currentScroll = $(window).scrollTop(); 
    if (currentScroll >= fixmeTop1) { 
     $('#nav').addClass("sticky"); 
    } else { 
     $('#nav').removeClass("sticky"); 
    } 
    if (currentScroll >= fixmeTop) { 
     $('.homepage-sidemenu').addClass("sticky"); 
    } else { 
     $('.homepage-sidemenu').removeClass("sticky"); 
    } 

}); 

$('#nav.sticky .menu li.highlight').mouseover(function() { 
    if ($('.homepage-sidemenu').hasClass('sticky')) { 
     $('.homepage-sidemenu.sticky').css('display', 'block'); 
    } 
});

什麼需要做的是，當主資產淨值是固定/當你向下滾動sidemenu消失。當懸停分類鏈接時，它應該變得可見。

我試過各種函數（懸停，鼠標，點擊等）來完成這件事，但沒有運氣。它在導航被修復時看起來像缺少東西。

有人可以指點我一些方向，或告訴我我做錯了什麼？！

來源

2015-05-14 Meules

嘗試了直CSS？ –

嘗試切換（隱藏/顯示）sidemenu當你添加和刪除粘性類在導航欄 – kishan

@EvanKnowles：是offcourse :)然後出現的問題是，sidemenu首先設置爲顯示：無，然後以某種方式需要顯示/隱藏懸停。這不能用純粹的CSS來完成，我認爲是因爲旁邊的菜單不在被徘徊的div中。 – Meules

您需要使用事件代理來附加您的mouseover事件，或者只需將事件附加到#nav而不是＃nav.sticky。然後，您可以像使用homepage-sidemenu一樣過濾事件內部。你正在嘗試在#nav擁有粘性類之前進行綁定，因此它不起作用。

來源

2015-05-14 12:29:01

好吧，這是有道理的...你有一個例子嗎？ – Meules

試過了！發生的唯一情況是，當導航不粘時，旁邊菜單在返回時仍然消失！請參閱我的更新[小提琴]（http://jsfiddle.net/meules/g4m7hgov/4/） – Meules

試試這個：這可能對你有幫助。

$('#nav.sticky .menu li.highlight').hover(function() { 
     if ($('.homepage-sidemenu').hasClass('sticky')) { 
      $('.homepage-sidemenu.sticky').css('display','block'); 
     } 
    }, 
    function(){ 
     if ($('.homepage-sidemenu').hasClass('sticky')) { 
      $('.homepage-sidemenu.sticky').css('display','none'); 
     } 
    } 
);

來源

2015-05-14 12:29:07 Maverick

'mouseover'不接受兩個處理程序（不像'hover'方法），反正沒有元素'#nav （即時處理程序） –

但是，你不能委託它（至少在一個簡單的方法）。你可以使用選擇器''#nav。菜單li.highlight''，而後看到的行爲：http://jsfiddle.net/g4m7hgov/3/ –

我們可以使用懸停 – Maverick

好的thx幫助的兩個答案我找到了解決方案。切換css display是不正確的。最好是使用addClass並在那裏添加你的CSS。

所以：

$('#nav .menu li.highlight').hover(function() { 
     if ($('.homepage-sidemenu').hasClass('sticky')) { 
      //$('.homepage-sidemenu.sticky').css('display','block'); 
      $('.homepage-sidemenu.sticky').addClass('active'); 
     } 
    }, 
    function(){ 
     if ($('.homepage-sidemenu').hasClass('sticky')) { 
      //$('.homepage-sidemenu.sticky').css('display','none'); 
      $('.homepage-sidemenu.sticky').removeClass('active'); 
     } 
    } 
);

和CSS

.homepage-sidemenu.sticky{ 
    display:none; 
} 
.homepage-sidemenu.sticky.active{ 
    display:block; 
}

Working fiddle

來源

2015-05-14 12:59:47 Meules

如果hasClass然後觸發鼠標懸停鼠標

回答

相關問題