Below is the HTML code I am working with:
<div id="app">
<div class="image">
<div class="overlay">
<p>Some overlay text</p>
</div>
<img src="https://placeimg.com/640/480/any" class="img-fluid">
</div>
<div class="info">
<h6 class="name">Title here</h6>
<p class="meta">Meta here</p>
</div>
<div class="info-button" @mouseover="addParentClass" @mouseout="removeParentClass">
Mouse over here!
</div>
I am looking to add certain classes to the image and overlay when a user hovers over the "info-button" div.
Currently, I have achieved this using Vue.js:
let vm = new Vue({
el: "#app",
data:{
isHovering: false
},
methods: {
addParentClass (event) {
event.target.parentElement.children[0].children[1].classList.add('active')
event.target.parentElement.children[0].children[0].classList.add('overlay-active')
},
removeParentClass (event) {
event.target.parentElement.children[0].children[1].classList.remove('active')
event.target.parentElement.children[0].children[0].classList.remove('overlay-active')
},
},
})
Although this works, it involves repetitive JavaScript. I have attempted to simplify it using the following code:
event.target.parent.closest('.overlay'.).classList.add('overlay-active')
Despite trying various selectors like parent, children, and closest, I have not been successful in achieving the desired outcome. How can I make the "closest" selector work in this scenario?
Here's a rough example of my code on Codepen: Link to codepen
Edit: It is worth mentioning that I intend to use this within a loop, so there will be multiple images and I only want the overlay to appear on the current image being hovered over.