英文:
how to make hover effect last longer even after removing mouse
问题
我正在尝试为我的浏览器创建一个主页，当我将鼠标悬停在stackoverflow上时，许多其他divs（可点击链接）变为可见，但当我移动鼠标以单击它们时，悬停状态会被取消，我无法单击它们。有人能否给我一个如何处理这个问题的一般想法？我希望即使删除主页一段时间后，悬停效果仍然存在。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper{
border:1px solid red;
}
label#stackoverflow:hover ~ a
{
opacity: 1;
height: auto;
}
a{
transition: all 5s ease;
opacity: 0;
height: 0;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
请注意，以上内容是您提供的代码和问题的翻译。
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper{
border:1px solid red;
}
label#stackoverflow:hover ~ a
{
opacity: 1;
height: auto;}
a{
transition: all 5s ease;
opacity: 0;
height: 0;}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 0
当a标签位于label标签内时，实际上当光标悬停在label上方的子元素上时，你仍然处于悬停状态。
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>
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a.subitem {
opacity: 0;
transition: all 0.5s;
}
label:hover a.subitem {opacity: 1}
<!-- language: lang-html -->
<div>
<label>Stackoverflow <a class="subitem" href="#">SomeLink</a></label>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论