[英]How to add hover effects for a menu bar that changes state on scroll?
I have a menu fixed at the top and at some point after it passes the var b = $(".brand-box")
it changes its appearance. 我有一个固定在顶部的菜单,在它通过var b = $(".brand-box")
之后的某个时候,它会更改其外观。 So, I have two states of my menu. 因此,我的菜单有两种状态。 Both of them need different hover states. 他们两个都需要不同的悬停状态。 Everything works perfectly up to a point when i try to implement them. 当我尝试实现它们时,一切都可以完美完成。 How do i do it? 我该怎么做?
I tried to do it this way: 我试图这样做:
$(document).ready(function() {
var a = $(".nav-mobile");
var b = $(".brand-box");
var c = $(".menu_item");
var d = $(".facebook-top");
var e = $(".vk-top");
var f = $(".menu-item-facebook");
var g = $(".menu-item-vk");
var posup = b.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= posup.top) {
a.addClass("nav-mobile-black");
c.addClass("menu-item-black");
d.addClass("facebook-top-black");
e.addClass("vk-top-black");
f.addClass("menu-item-facebook-black");
g.addClass("menu-item-vk-black");
var indicator = false;
} else {
a.removeClass("nav-mobile-black");
c.removeClass("menu-item-black");
d.removeClass("facebook-top-black");
e.removeClass("vk-top-black");
f.removeClass("menu-item-facebook-black");
g.removeClass("menu-item-vk-black");
var indicator = true;
}
$(".menu_item").mouseover(function(){
if (indicator) {
$(this).addClass("menu_item-black-hover");
}
else {
$(this).addClass("menu_item-hover");
}
});
$(".menu_item").mouseout(function(){
if (indicator==false) {
$(this).removeClass("menu_item-black-hover");
}
else {
$(this).removeClass("menu_item-hover");
}
});
});
});
I also tried this. 我也试过了。 It didn't work 没用
//$(".menu_item").mouseover(function(){
// var that = this;
// var z = $(".brand-box");
// var pos = z.position();
// $(window).scroll(function() {
// var windowpos = $(window).scrollTop();
//
// if (windowpos >= pos.top) {
//
You should implement hover states using pure CSS instead of adding classes to simulate a hover. 您应该使用纯CSS实现悬停状态,而不是添加类来模拟悬停。 Like so: 像这样:
.myClass:hover {
/* styles */
}
But to answer your question directly, this should work if you move your $(".menu_item").mouseover
and $(".menu_item").mouseout
functions into your if statement. 但是要直接回答您的问题,如果将$(".menu_item").mouseover
和$(".menu_item").mouseout
函数移动到if语句中,则此方法应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.