Question

我在这里有一个共享图标，当我将鼠标悬停在它上面时，它应显示其他图标（facebook，g +，pinterest等）。事情是我需要从页面中取出社交图标，而他们或共享图标不会悬停，我需要它们在显示时淡入。我以前做过这个，但我真的没有想到我是怎么做到的。我想学习这样做的方法，因为我不得不经常这样做。这是如何正确，简单和干净地完成的？

HTML

<div class="share">
    <i class="fa fa-share">
        <span class="socials">
            <a class="pinterest" href="#"> <i class="fa fa-pinterest"></i> </a>
            <a class="gplus" href="#"> <i class="fa fa-google-plus"></i> </a>
            <a class="twitter" href="#"> <i class="fa fa-twitter"></i> </a>
            <a class="facebook" href="#"> <i class="fa fa-facebook"></i> </a>
        </span>
    </i>

    <div>Share</div>
</div>

CSS

.blog-wrapper .stats i.fa{
    font-size: 26px;
    margin-top: 10px;
}

.blog-wrapper .stats .share {
    position: relative;    
}

.blog-wrapper .stats .socials{
    position: absolute;
    top: 8px;
    right: -20px;
    width: 35px;
    transition: 0.35s;    
    z-index: 100;    
}

.blog-wrapper .stats .socials a {
    margin: 0;
}

这是相关的。正如我所描述的，问题更加复杂。我所知道的是

使用display：none从页面布局中取出元素
使用display：none取消转换问题：我需要从布局中取出元素并仍然有过渡
我还需要在悬停时不显示子元素，只显示悬停在父母身上时显示，如果悬停在他们身上，则会一直显示

使父元素可见并可在父鼠标悬停时访问

0 个答案: