gpt4 book ai didi

html - 为什么我的悬停样式没有被应用?

转载 作者:太空宇宙 更新时间:2023-11-03 22:27:54 24 4
gpt4 key购买 nike

我正在创建一个悬停按钮并使用不透明度显示动画文本,但它不起作用:

.text-hello{
opacity: 0;
transition: .3s ease;
position: absolute;
}

.icon-hello:hover .text-hello{
opacity: 1 !important;
}
<div class="test" style="background-color: #eaeaea; position: absolute; bottom: 9%; right: 10%;">
<img src="{{ url('images/res1.svg')}}" style="width: 35px; height:35px;" class="icon-hello">
<span class="text-hello">Hello World</span>
</div>

最佳答案

需要添加相邻的兄弟选择器(+):

.icon-hello:hover + .text-hello {
// styles
}

它会抓取第一个元素之后的元素。

关于html - 为什么我的悬停样式没有被应用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50258741/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com