如何通过将光标传递到DIV上来修改DIV内部并进行图像处理

Question

我开始编写代码而且我遇到了正在处理的代码。 首先，我将鼠标放在名为“Article”的DIV容器中，内部的所有内容都会改变其不透明度。 我只想改变内部不透明度的图像，所以在DIV内部的任何地方，图像的不透明度应为1.一旦鼠标移出，图像的不透明度应该变为0.75。 我尝试了多个代码但是DIV内的每个元素的不透明度都发生了变化。 希望你能帮助我。

我试图改变文件。 通过document.getElementsByTagName（'img'）[i]获取getElementsByTagName（'article'）[i]但它只是在鼠标悬停在图像上时更改了图像的不透明度。 我和以前一样尝试了document.getElementsByTagName（'article'）[i] .getElementsByTagName（'img'）[i]。 我试图通过img.style改变this.style什么都没发生...

for (var i = 0; i<document.querySelectorAll('article').length;i++)
document.getElementsByTagName('article')[i].onmouseover=function(){
this.style.opacity = 1;
}
for (var i = 0; i<document.querySelectorAll('article').length;i++)
document.getElementsByTagName('article')[i].onmouseleave=function(){
this.style.opacity = 0.75;
}

希望当我通过一篇文章时，图像不透明度会发生变化。 谢谢，你们都有一个美好的一年！

Answer 1

尝试使用querySelectorAll（'article img'）而不是getElementsByTagName。 这只会影响img里面的文章。

Answer 2

感谢伙计们最后我改为css，并且非常抱歉这样一个noobie并说这不起作用。 我将我的文章（DIV）命名为“爸爸”，将我的形象命名为“孩子”。

OMG很简单，我的生活很复杂。 这是我的最终代码：

.Dad:hover .Child {
  opacity: 1;
}

Answer 3

我不确定你要求的是什么，但检查一下：

HTML

<div class="container">
  <h3>this is container</h3>
  <img src="https://picsum.photos/200/300/?123" alt="">
  <img src="https://picsum.photos/200/300/?14" alt="">
  <img src="https://picsum.photos/200/300/?15" alt="">
</div>

CSS

.container{
    background: #d87300;
}

.half-transparent{
    opacity: 0.5;
}

JS

const images = [...document.querySelectorAll('.container img')]
const container = document.querySelector('.container')

container.addEventListener('mouseenter', ()=>{
    images.forEach(element => {
        element.classList.add('half-transparent')
    })
})

container.addEventListener('mouseleave', ()=>{
    images.forEach(element => {
        element.classList.remove('half-transparent')
    })
})