0
I have the following class in CSS:
.iconQuemSomos {
cursor: pointer;
margin: 0 15px;
transition: all 0.3s ease;
}
.iconQuemSomos:focus {
opacity: 1;
position: absolute;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.iconQuemSomos:not(:focus){
visibility: hidden;
}
What I’m trying to do is that the object that is with the class and that is selected in the focus, can occur an animation while the other similar objects, disappear from the screen. The problem is that the CSS is loaded before any user interaction, so the objects of this class that initially will not be focused, will already appear on the "missing" screen. I thought about using JS, but unfortunately I do not master it very well yet, someone has some idea how I can solve?
I’m trying to do something like:
.iconQuemSomos:not(:focus) img:not(:active){
visibility: hidden;
}
since HTML is like this:
<a class="iconQuemSomos" href="#">
<img class="img-fluid" style="height: 150px" src="assets/img/icos/Icone_Quemsomos.png">
</a>
I don’t know how to do this with
css, I would have to run some tests, but I think this should help as an alternative: https://css-tricks.com/hover-on-everything-but/ click on "View Demo"– Ricardo Pontual
But if when you click a you want to hide the others, how will you be able to click on another option later? Once you click qq link it will animate, but the others will hide correct? There if the others will be hidden as you will be able to click on them later?
– hugocsl
The moment I clicked on any other corner of the screen, I would take the focus of the selected object and return the rest to the default state. It would be gone if it’s not in focus but you’d have to have a check first to see if there’s one in focus. In case none is in focus, then all objects would be visible. I think it would have to be by JS even... even by this check.
– Mikhael Araujo
Use
document.querySelectorAll(".iconQuemSomos")[0].focus();to force the focus on the first element of the collection.– Sam