Как я могу изменить изображение внутри DIV, наведя курсор на DIV

Question

Я начинаю с кодирования и застреваю в коде, над которым работаю. Сначала я передаю мышь внутри контейнера DIV, который называется «Article», и все внутри меняет свою непрозрачность. Я хочу, чтобы изменилось только изображение с непрозрачностью внутри, поэтому везде внутри DIV непрозрачность изображения должна быть равна 1. После того, как мышь отключена, непрозрачность изображения должна составить 0,75. Я пробовал несколько кодов, но непрозрачность изменилась для каждого элемента внутри DIV. Надеюсь, вы могли бы помочь мне.

Я пытался изменить документ. getElementsByTagName ('article') [i] by document.getElementsByTagName ('img') [i], но он просто изменяет непрозрачность изображения, когда мышь находится над изображением. Я попробовал document.getElementsByTagName ('article') [i] .getElementsByTagName ('img') [i] так же, как и раньше. Я пытался изменить this.style img.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

Я не уверен, что вы просите, но проверьте это:

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

Answer 2

Спасибо, ребята, на самом деле в конце я перехожу на css, и он работает совершенно извиняюсь за то, что я такой нуби, и говорю, что это не работает. Я назвал свою статью (DIV) «Папа», а мой образ - «ребенок».

О боже, это было просто, и я сильно усложняю свою жизнь. Это мой окончательный код:

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

Answer 3

Попробуйте использовать querySelectorAll ('article img') вместо getElementsByTagName. Это повлияет только на img внутри статьи.