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
CodePudding user response:
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>
CodePudding user response:
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>
CodePudding user response:
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.