我想在 li 处于活动状态时更改图像

Question

如何在li处于活动状态时更改菜单背景图像，我正在尝试设计何时将鼠标悬停在li并且li活动背景将发生变化，悬停效果正在工作，但我不明白如何在li处于活动状态时更改菜单背景图像

$(function () {
var image = $('.menu').find('img').attr('src');
var lastImage;
$('.menu ul li.navLink').mouseover(function () {
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if(lastImage !== currentImage) {
$('.navigationGif').removeClass('animation');
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);   
lastImage = currentImage
}  })});

body {font-family:'Aktiv Grotesk', serif;}
#toggle { position: fixed; right: 5%; width: 50px; height: 50px; margin-top: 20px; z-index: 99; }
#toggle div { height: 4px; margin: 8px auto; border-radius: 5px; transition: all 0.3s; backface-visibility: hidden; background: #ed8d8d; }
.menu {  text-align: center;  margin: auto;  height: 100%;  padding-top: 2%;  padding-bottom: 10%;  z-index: 1; }
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px; }
.menu li+li{ margin-top: 30px; }
.navLink.active a{ color: #ed8d8d; }
.menu a{ color: black; font-size: 3.5rem; }
.navLink:hover .navItem{ color: whitesmoke; }
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
.navigationGif.animation { animation: menuBG 0.7s ease-in;}
.menu img{ width: 100%; z-index: -99; }
@keyframes menuBG { 0%{   transform: scale(1.07); } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif"> <div class=""> <img src="" alt="" class="src"> </div></div>
<div class="data"><ul>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active"><a href="" class="navItem">Home</a></li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works"><a href="" class="navItem">Works</a></li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about"><a href="" class="navItem">About</a></li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"class="navLink contact"><a href="" class="navItem">Contact</a></li>
</ul></div> </div>

Answer 1

我相信li元素没有"活动"状态，尽管a元素确实具有活动状态(当您按住鼠标时(，但这可能不是您需要的。如果要在单击时更改图像，请使用.click()而不是.mouseover()。由于用户应该看到动画，因此您可能应该使用.preventDefault()方法阻止定位点的默认行为。

我保留了 html 和 css 不变，只修复了 js：

$(function() {
var image = $('.menu img').attr('src');
var lastImage;
$('.menu ul li.navLink').click(function(e) {
e.preventDefault();
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if (lastImage !== currentImage) {
$('.navigationGif').removeClass('animation');
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
}
})
});

body {font-family:'Aktiv Grotesk', serif;}
#toggle { position: fixed; right: 5%; width: 50px; height: 50px; margin-top: 20px; z-index: 99; }
#toggle div { height: 4px; margin: 8px auto; border-radius: 5px; transition: all 0.3s; backface-visibility: hidden; background: #ed8d8d; }
.menu {  text-align: center;  margin: auto;  height: 100%;  padding-top: 2%;  padding-bottom: 10%;  z-index: 1; }
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px; }
.menu li+li{ margin-top: 30px; }
.navLink.active a{ color: #ed8d8d; }
.menu a{ color: black; font-size: 3.5rem; }
.navLink:hover .navItem{ color: whitesmoke; }
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
.navigationGif.animation { animation: menuBG 0.7s ease-in;}
.menu img{ width: 100%; z-index: -99; }
@keyframes menuBG { 0%{   transform: scale(1.07); } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif"> <div class=""> <img src="" alt="" class="src"> </div></div>
<div class="data"><ul>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active"><a href="" class="navItem">Home</a></li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works"><a href="" class="navItem">Works</a></li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about"><a href="" class="navItem">About</a></li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"class="navLink contact"><a href="" class="navItem">Contact</a></li>
</ul></div> </div>