I'm trying to add a class to a div on hover but I need it to stay active until mouse enters a sibling.
<div class="container">
<p>Hover me 1</p>
<div class="hidden">Somthing 1</div>
</div>
<div class="container">
<p>Hover me 2</p>
<div class="hidden">Somthing 2</div>
</div>
<div class="container">
<p>Hover me 3</p>
<div class="hidden">Somthing 3</div>
</div>
By default the div will have the class "hidden" and when the user hovers that div should display and stays visible until the user hover another div with the same class.
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 9999s, opacity 0.1s linear;
}
.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
This is what I'm trying to do
document.ready(function() {
document.getElementByClassName("hidden").mouseenter(function() {
document.getElementByClassName("show").classList.remove("show").classList.add("hidden");
this.classList.remove("hidden").classList.add("show");
});
});
It think this is easier to do with jQuery but I need to use pure JS
You can add a mouseenter event listener to all elements with the container class that adds the hidden class to the div in each one and adds the show class to the div in the current one.
const containers = document.querySelectorAll('.container');
containers.forEach(f => f.addEventListener('mouseenter', function() {
containers.forEach(e => {
var div = e.querySelector('div');
div.classList.add('hidden');
div.classList.remove('show');
})
this.querySelector('div').classList.add('show')
})).hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 9999s, opacity 0.1s linear;
}
.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>Hover me 1</p>
<div class="hidden">Somthing 1</div>
</div>
<div class="container">
<p>Hover me 2</p>
<div class="hidden">Somthing 2</div>
</div>
<div class="container">
<p>Hover me 3</p>
<div class="hidden">Somthing 3</div>
</div>Pure CSS solution
What you need is a :hover CSS pseudo class and adjacent sibling selector
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 9999s, opacity 0.1s linear;
}
.container p:hover + div.hidden {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}<div class="container">
<p>Hover me 1</p>
<div class="hidden">Somthing 1</div>
</div>
<div class="container">
<p>Hover me 2</p>
<div class="hidden">Somthing 2</div>
</div>
<div class="container">
<p>Hover me 3</p>
<div class="hidden">Somthing 3</div>
</div>I like to do this sort of thing with one listener. Here we check if the mouse is over a .container p, we store the last hidden div in a variable. If there is something in element, we add the hidden class back, then we remove the hidden class from the current sibling and store it in the element variable.
let element;
document.addEventListener('mouseover', e => {
if (e.target.matches('.container p')) {
if (element != null) {
element.classList.add('hidden');
}
element = e.target.nextElementSibling;
element.classList.remove('hidden');
}
});.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 9999s, opacity 0.1s linear;
}
.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.container p {
cursor: pointer;
}<div class="container">
<p>Hover me 1</p>
<div class="hidden">Somthing 1</div>
</div>
<div class="container">
<p>Hover me 2</p>
<div class="hidden">Somthing 2</div>
</div>
<div class="container">
<p>Hover me 3</p>
<div class="hidden">Somthing 3</div>
</div>I also added a cursor: pointer css rule on the p tags.