我正在寻找鼠标悬停在 javascript 中，其中事件附加到一个段落，但它会改变不同元素的样式

问题描述

我有 8 张图片包含所有带有 .pic-link 类的段落（我使用该段落作为链接，因为它的 z-index 必须保持最高）。图片下方有一个 div，它最初是在 css 中为阴影效果设计的，它的类是 .shade.. 我想将鼠标悬停在 .pic-link 但更改 .shade 以使其背景 =“白色”...我想我可以在 css 中这样做 - .pic-link:hover:shade，但我想知道它javascript..这是我的尝试

var shade = document.querySelector(".shade");
var pic = document.querySelectorAll(".pic- 
link");
for (var i = 0; i < pic.length; i++) {
pic[i].addEventListener("mouSEOver",function(event) {
        shade.style.background = "white";
    })
}

我知道我将不得不添加鼠标悬停，我只是在寻找逻辑......我的代码将为每张图片添加鼠标悬停，但与悬停在图片上的样式更改不匹配......我什至尝试过选择所有 .shade 类并编写 shade[i].style.background = "white" 但这更没有影响力。编辑...HTML如下...

<div class="single-pic-container"> 
                    <div class="shade"></div>
                    <img src="./images/mobile/image-deep-earth.jpg" alt="picture of earth" class="pic mobile-pic">
                    <img src="./images/desktop/image-deep-earth.jpg" alt="picture of earth" class="pic desktop-pic">
                    <a href="#" class="pic-link"><p>
                        Deep <br> earth
                    </p></a>   
                </div>

一张图片设置为dislpay = "none";直到媒体查询。并且容器 div .single-pic-container 是 display = "grid"，所以我可以轻松地覆盖该段落。另外我正在练习网格。

解决方法

您应该使用 backgroundColor 而不是 background：

const pics = document.querySelectorAll('.pic-link');

const mouseOverHandler = (e) => { // e - it's an event.
  // e.currentTarget - it's an access to an element-source of the event.
  const shade = e.currentTarget.parentNode.querySelector('.shade');
  shade.style.backgroundColor = '#ffffff';
};

const mouseOutHandler = (e) => {
  const shade = e.currentTarget.parentNode.querySelector('.shade');
  shade.style.backgroundColor = 'transparent'; // Set there background color as it was before
};

pics.forEach((pic) => {
  pic.addEventListener('mouseover',mouseOverHandler);
  pic.addEventListener('mouseout',mouseOutHandler);
});

如果元素将被销毁，则必须删除侦听器，以避免内存泄漏。因此，仅用作具有名称的事件侦听器函数。因为匿名函数不能在像 pic.removeEventListener('mouseover',function(e) { //... }) 这样的表达式中删除。

javascript mouseover styles