css 如何使悬停效果持续更长时间,即使在删除鼠标

7vhp5slm  于 2023-02-20  发布在  其他
关注(0)|答案(1)|浏览(138)

我试图使我的浏览器主页时,我悬停在stackoverflow许多其他div(可点击链接)成为可见的,但当我移动我的鼠标点击他们的悬停状态是撤消的,我无法点击他们任何人都可以给我如何处理它的一般想法,我想使悬停的影响留即使在删除房子一段时间

.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>
vhmi4jdf

vhmi4jdf1#

沿着这些路线的一些东西应该会给你指明正确的方向。
a标记位于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>

相关问题