i am trying to make a home page for my browser
when i hover over stackoverflow many others divs(clickable links) become visible
but when i move my mouse to click over them the hover state is undone and i am unable to click them does anyone can give me general idea of how to deal with it , i want to make the hover affect stay even after removing the house for some time
.wrapper{
border:1px solid red;
}
label#stackoverflow:hover ~ a
{
opacity: 1;
height: auto;}
a{
transition: all 5s ease;
opacity: 0;
height: 0;} <div class="searchcontainer">
<div class="wrapper">
<label
id="stackoverflow" for="stackoverflow"><img
name="stackoverflowask"
class='selector'
src="./assets/Stack_Overflow_icon.svg"><span
class="stack black">stack</span><span
class="overflow black">overflow</span>
</label></br>
<a href="https://stackoverflow.com/questions/ask">
<label
id="substackoverflow"><span
class="ask black">Ask </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/questions">
<label
id="substackoverflow"><span
class="see black">See </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/users/14266024/infinity">
<label
id="substackoverflow"><span
class="look black">Look At </span><span class="question black">Profile</span>
</label>
</a></br>
</div>
</div>>Solution :
Something along these lines should point you in the right direction.
When the a tag is inside the label tag, you are technically still hovering over the label when your cursor is over it’s children.
a.subitem {
opacity: 0;
transition: all 0.5s;
}
label:hover a.subitem {opacity: 1}<div>
<label>Stackoverflow <a class="subitem" href="#">SomeLink</a></label>
</div>