为什么我的悬停样式没有被应用？

Question

我创建了一个悬停按钮，并使用不透明度显示动画文字，但它无效：

＆＃13;

＆＃13;

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

.icon-hello:hover .text-hello{
    opacity: 1 !important;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要添加相邻的兄弟选择器（+）：

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

它会在第一个元素之后立即抓取元素。