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

Question

I'm starting out at coding and I'm stuck in a code that I'm working on. First I pass the mouse inside my DIV container called "Article" and everything inside change its opacity. I want just the image that is inside's opacity changed, so everywhere inside the DIV the opacity of the image should be 1. Once the mouse is out the opacity of the image should become 0.75. I tried multiple codes but the opacity changed for every element inside the DIV. Hope you could help me.

I tried to change document . getElementsByTagName ('article') [i] by document.getElementsByTagName('img')[i] but it just changed the image opacity when mouse is over the image. I tried document.getElementsByTagName('article')[i].getElementsByTagName('img')[i] same as before. I tried to change this.style by img.style nothing happened...

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;
}

Hope that when I pass over an article the image opacity changes. Thanks, you all an have a great year!

Answer 1

Try using querySelectorAll('article img') instead of getElementsByTagName. This will only affect img inside article.

Answer 2

Thanks Guys in fact at the end I change to css and it works perfectly sorry for being such a noobie and say that this doesn't work. I named my Article (DIV) "Dad" and my image "child".

OMG it was to simple and I complicate my life by a lot. This is my final code:

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

Answer 3

I'm not sure what are you asking for, but check this:

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')
    })
})