实现两种触发方式激活同一li hover效果的技术求助

我现在有如下HTML结构，每个<figure>里包含一张图片和一个带<li>的链接。已经给<li>写了hover样式，目前只有悬停<li>时样式才会生效。现在需要实现两种触发该hover样式的方式：

1. 鼠标悬停<li>（已实现）
2. 鼠标悬停对应的图片时，触发该<li>的相同hover效果
   下面是我的现有代码，JavaScript部分还没完成，求完整解决方案。

现有HTML代码 #

<div class="main">
    <figure>
        <img src="img/estanteria.jpg" alt="library" width="300" height="300" id="estanteria"> 
        <a href="collection.html">
            <li>My Collection</li>
        </a>
    </figure>
    <figure>
        <img src="img/archivador.jpg" alt="Edit Collection" width="300" height="300" id="archivador"> 
        <a href="edit.html">
            <li>Edit Collection</li>
        </a>
    </figure>
    <figure>
        <img src="img/contact.jfif" alt="Contact me" width="300" height="300" id="contact"> 
        <a href="contact.html">
            <li>Contact me</li>
        </a>
    </figure>
</div>

现有CSS代码 #

li {
    padding: 1rem 2rem 1.15rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #ebebeb;
    min-width: 80px;
    margin: auto;
    text-align:center;
    font-family:Arial;
    font-size: 1em;
}    
li:hover {
    background-image:url('https://scottyzen.sirv.com/Images/v/button.png');
    background-size: 100% 100%;
    color: #27262c;
    animation: spring 1200ms ease-out;
    text-shadow: 0 -1px 0 #ef816c;
    font-weight: bold;
} 
li:active {
    transform: translateY(4px);
}

未完成的JavaScript代码 #

let estanteria = document.getElementById("estanteria"); 
let archivador = document.getElementById("archivador"); 
let contact = document.getElementById("contact");

//Now, we need to add an Event Listener to listen when the image gets mouse over.

estanteria.addEventListener('mouseover', function(){
}) 
estanteria.addEventListener('mouseout', function(){
})

解决方案 #

方法1：纯CSS实现（推荐，无需JS） #

因为图片和列表项都在同一个<figure>容器里，利用CSS父元素hover选择器，直接让悬停整个<figure>时触发<li>的样式，这样不管鼠标悬停在图片还是列表项上，都会生效。

修改CSS代码，补充缺失的动画定义，并扩展触发条件：

li {
    padding: 1rem 2rem 1.15rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #ebebeb;
    min-width: 80px;
    margin: auto;
    text-align:center;
    font-family:Arial;
    font-size: 1em;
}    
/* 同时支持悬停li或父容器figure时触发样式 */
li:hover,
figure:hover li {
    background-image:url('https://scottyzen.sirv.com/Images/v/button.png');
    background-size: 100% 100%;
    color: #27262c;
    animation: spring 1200ms ease-out;
    text-shadow: 0 -1px 0 #ef816c;
    font-weight: bold;
} 
li:active {
    transform: translateY(4px);
}

/* 补充原CSS缺失的spring动画定义 */
@keyframes spring {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

方法2：JavaScript实现（若必须用JS） #

如果一定要用JavaScript实现，可将hover样式提取为独立类，通过事件监听添加/移除类来触发效果。

首先修改CSS，提取hover样式为类：

li {
    padding: 1rem 2rem 1.15rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #ebebeb;
    min-width: 80px;
    margin: auto;
    text-align:center;
    font-family:Arial;
    font-size: 1em;
}    
/* 原hover样式保留，同时新增类选择器 */
li:hover,
li.hover-active {
    background-image:url('https://scottyzen.sirv.com/Images/v/button.png');
    background-size: 100% 100%;
    color: #27262c;
    animation: spring 1200ms ease-out;
    text-shadow: 0 -1px 0 #ef816c;
    font-weight: bold;
} 
li:active {
    transform: translateY(4px);
}

@keyframes spring {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

然后完善JavaScript代码：

// 获取所有图片元素
const images = document.querySelectorAll('figure img');

// 给每个图片绑定鼠标事件
images.forEach(img => {
    // 鼠标悬停图片时，给对应li添加激活类
    img.addEventListener('mouseover', () => {
        const targetLi = img.parentElement.querySelector('li');
        targetLi.classList.add('hover-active');
    });
    // 鼠标离开图片时，移除激活类
    img.addEventListener('mouseout', () => {
        const targetLi = img.parentElement.querySelector('li');
        targetLi.classList.remove('hover-active');
    });
});

内容的提问来源于stack exchange，提问作者Jose David Garcia Corzo