css - 显示 block 上的悬停过渡不起作用

Question

我想在元素悬停上添加一些效果。但我似乎无法让它发挥作用。下面是我当前元素中的html结构和css

<!-- HTML ELEMENT STRUCTURE -->
<div class="do-share">
    <ul class="social-container">
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ul>
</div>

这是CSS

/* CSS file */
.do-share:hover > .social-container{
    opacity: 1;
    display: block;
    position: absolute;
    right: 0;
    list-style: none;
    margin: 0;
    top: -85px;
}
.social-container {
    display: none;
    opacity: 0;
    transition: all 2s linear;
}

但是过渡效果对此不起作用。不确定我做错了什么

Answer 1

试试这个

.do-share:hover > .social-container{
    opacity: 1;
    display: block;
    position: absolute;
    left: 0;
    list-style: none;
    margin: 0;
    top: 5px;
}
.social-container {
    display: none;
    opacity: 0;
    transition: all 2s linear;

}
.do-share{
    min-height: 100px;
}

<div class="do-share">
    <ul class="social-container">
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ul>
</div>