我需要添加 :hover 当类 .active 被添加到我的函数 scrollTop() > 50 时,因为发生这种情况时我的类 a:hover 被删除了。
https://codepen.io/ta_io/pen/QRgEJw
.logo a {
color: #000;
font-size: 36px;
text-decoration: none;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-decoration: none;
font-size: 36px;
}
nav ul li a.active {
color: coral;
}
.logo a.active {
color: coral;
}
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$("nav ul li a").addClass("active");
} else {
$("nav ul li a").removeClass("active");
}
});
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$(".logo a").addClass("active");
} else {
$(".logo a").removeClass("active");
}
});
最佳答案
我假设问题是一旦样式在滚动时发生变化,悬停效果就不再有效。下面为您的 CSS 更新了样式。为 .active a 标签添加了悬停状态。
html {
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;
}
body {
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;
}
.header {
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 85%;
height: 80px;
}
.logo {
font-family: "at";
}
a {
color: #000;
font-size: 36px;
text-decoration: none;
transition: color 0.6s ease;
}
a:hover {
color: #ccc;
}
ul {
font-family: "at";
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
nav ul li {
display: inline-block;
font-family: "at";
margin-top: 0px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-decoration: none;
font-size: 36px;
}
.container {
max-width: 100%;
width: 85%;
height: 76px;
background-color: aqua;
margin-left: auto;
margin-right: auto;
}
.content-wrapper {
max-width: 100%;
width: 85%;
height: 2000px;
margin-left: auto;
margin-right: auto;
background-color: dimgray;
}
nav ul li a.active, .logo a.active {
color: coral;
transition: all 0.6s ease;
}
nav ul li a.active:hover, .logo a.active:hover {
color: #ccc;
}
关于jquery - 当我的窗口滚动> 50时如何添加:hover on my class .事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56190146/