Jquery 使子元素在父悬停时可见并可访问

我这里有一个共享图标，当我将鼠标悬停在上面时，它应该会显示其他图标（facebook、g+、pinterest等）。我需要的是，当社交图标或共享图标未悬停时，我需要将其从页面中取出，并且在显示时淡入。我以前做过，但我真的不知道我到底是怎么做的。我想学习做这件事的方法，因为我必须时不时地做。这是如何正确、简单和干净地完成的

HTML

这与我有关。正如我所描述的，问题更为复杂。我现在知道的是

• 使用display:none将元素从页面布局中移除
• 使用“显示：无”将取消转换 问题：我需要从布局中取出元素，并且仍然有过渡
• 我还需要子元素在鼠标悬停在它们上面时不显示，只在鼠标悬停在父元素上面时显示，如果鼠标悬停在它们上面，则在它们被显示后继续显示

---

我也知道可能是重复的。但是我需要它在使用css转换时淡入。似乎你在你的问题中复制粘贴了错误的css。请编辑它，或者更好-创建一个JSFIDLE，说明您的位置，这样会更容易帮助您。@SzekelyJonathan，我从我发布的问题答案中获取了这个演示，我在原始问题中添加了额外的描述

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

.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;
}