如何使用jquery在鼠标上方显示或隐藏社交共享按钮div

我正在尝试解决当鼠标悬停在一个div上时如何显示隐藏的div（facebook、google+、twitter）

以右上角共享圆形div的动画为例：

请看我做了什么：
以下是我在代码中所做的工作：

HTML

JS

---

当您将鼠标悬停在共享框上时，我如何才能做到这一点？旁边会出现另一个剪切框。

我访问了您提到的站点。关于那个网站，我把制作这个动画的代码作为参考

 <style type="text/css">
    #share
    {
        display: none;
        position: absolute;
        right: 65px;
        top: 20px;
        line-height: 46px;
        padding-right: 59px;
    }
    #share .list
    {
        position: absolute;
        top: 0;
        right: 0;
        background: transparent;
    }
    #share .list strong, #share .list a
    {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        background: #fff;
        color: #3fbad8;
        margin: 0 0 6px;
        font-family: 'icomoon';
    }
    #share .list strong
    {
        cursor: default;
    }
    .ie9 #share .list strong
    {
        padding-top: 5px;
        height: 41px;
    }
    #share .list strong span
    {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 0;
        background: #fff;
        -webkit-transition: height .0001s linear;
        -moz-transition: height .0001s linear;
        -ms-transition: height .0001s linear;
        -o-transition: height .0001s linear;
        transition: height .0001s linear;
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a
    {
        background: #ff3;
        color: #000;
        -webkit-transition: -webkit-transform .0001s linear, background .0001s ease, color .0001s ease;
        -moz-transition: -moz-transform .0001s linear, background .0001s ease, color .0001s ease;
        -ms-transition: -ms-transform .0001s linear, background .0001s ease, color .0001s ease;
        -o-transition: -o-transform .0001s linear, background .0001s ease, color .0001s ease;
        transition: transform .0001s linear,background .0001s ease,color .0001s ease;
        -webkit-transform: scale(0) translate3d(0,0,0);
        -moz-transform: scale(0) translate3d(0,0,0);
        -ms-transform: scale(0) translate3d(0,0,0);
        -o-transform: scale(0) translate3d(0,0,0);
        transform: scale(0) translate3d(0,0,0);
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a:hover
    {
        background: #000;
        color: #fff;
        text-decoration: none;
    }
    #share .list .tw
    {
        font-size: 18px;
    }
    #share .list .fb
    {
        font-size: 32px;
    }
    #share .list .gp
    {
        font-size: 32px;
    }
    #share .list:hover strong span, #share .list.hover strong span
    {
        height: 135px;
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s;
        -moz-transition-duration: .3s;
        -ms-transition-duration: .3s;
        -o-transition-duration: .3s;
        transition-duration: .3s;
    }
    #share .list:hover a, #share .list.hover a
    {
        -webkit-transform: scale(1) translate3d(0,0,0);
        -moz-transform: scale(1) translate3d(0,0,0);
        -ms-transform: scale(1) translate3d(0,0,0);
        -o-transform: scale(1) translate3d(0,0,0);
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s,.4s,.4s;
        -moz-transition-duration: .3s,.4s,.4s;
        -ms-transition-duration: .3s,.4s,.4s;
        -o-transition-duration: .3s,.4s,.4s;
        transition-duration: .3s,.4s,.4s;
    }
    #share .list:hover .tw, #share .list.hover .tw
    {
        -webkit-transition-delay: .1s,.0001s,.0001s;
        -moz-transition-delay: .1s,.0001s,.0001s;
        -ms-transition-delay: .1s,.0001s,.0001s;
        -o-transition-delay: .1s,.0001s,.0001s;
        transition-delay: .1s,.0001s,.0001s;
    }
    #share .list:hover .fb, #share .list.hover .fb
    {
        -webkit-transition-delay: .2s,.0001s,.0001s;
        -moz-transition-delay: .2s,.0001s,.0001s;
        -ms-transition-delay: .2s,.0001s,.0001s;
        -o-transition-delay: .2s,.0001s,.0001s;
        transition-delay: .2s,.0001s,.0001s;
    }
    #share .list:hover .gp, #share .list.hover .gp
    {
        -webkit-transition-delay: .3s,.0001s,.0001s;
        -moz-transition-delay: .3s,.0001s,.0001s;
        -ms-transition-delay: .3s,.0001s,.0001s;
        -o-transition-delay: .3s,.0001s,.0001s;
        transition-delay: .3s,.0001s,.0001s;
    }
</style>

<p id="share" style="opacity: 1; display: block;">
    Want Solution <span class="list"><strong>?? <span></span>
    </strong><a class="tw">twr</a> <a class="fb">fb</a> <a class="gp">G+</a> </span>
</p>

#分享
{
显示：无；
位置：绝对位置；
右：65px；
顶部：20px；
线高：46px；
右边填充：59px；
}
#共享列表
{
位置：绝对位置；
排名：0；
右：0；
背景：透明；
}
#共享。列表强，#共享。列表a
{
位置：相对位置；
显示：块；
宽度：46px；
高度：46px；
字体大小：30px；
字体大小：正常；
文本对齐：居中；
-webkit边界半径：23px；
-moz边界半径：23px；
边界半径：23px；
背景：#fff；
颜色：3fbad8；
边际：0.06像素；
字体系列：“icomoon”；
}
#分享。列强
{
游标：默认值；
}
.ie9#共享。强列表
{
垫面：5px；
高度：41px；
}
#共享。列出强跨度
{
位置：绝对位置；
最高：100%；
左：50%；
宽度：1px；
身高：0；
背景：#fff；
-webkit过渡：高度.0001s线性；
-moz过渡：高度0.0001s线性；
-ms转换：高度0.0001s线性；
-o型过渡：高度0.0001s线性；
过渡：高度.0001s线性；
不透明度：0；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
}
#共享。列出一个
{
背景:#ff3；
颜色：#000；
-webkit转换：-webkit转换.0001s线性，背景.0001s轻松，颜色.0001s轻松；
-莫兹变换：-莫兹变换.0001s线性，背景.0001s轻松，颜色.0001s轻松；
-ms变换：-ms变换.0001s线性，背景.0001s平滑，颜色.0001s平滑；
-o-变换：-o-变换.0001s线性，背景.0001s轻松，颜色.0001s轻松；
变换：变换.0001s线性，背景.0001s缓和，颜色.0001s缓和；
-webkit变换：缩放（0）平移3D（0,0,0）；
-moz变换：缩放（0）平移3D（0,0,0）；
-ms变换：缩放（0）平移3D（0,0,0）；
-o变换：缩放（0）平移3D（0,0,0）；
变换：缩放（0）平移3D（0,0,0）；
不透明度：0；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
}
#共享。列表a：悬停
{
背景：#000；
颜色：#fff；
文字装饰：无；
}
#share.list.tw
{
字号：18px；
}
#share.list.fb
{
字体大小：32px；
}
#share.list.gp
{
字体大小：32px；
}
#share.list:hover strong span，#share.list.hover strong span
{
高度：135px；
不透明度：1；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=100）；
-webkit转换持续时间：.3s；
-moz转换持续时间：.3s；
-ms转换持续时间：.3s；
-o-过渡持续时间：.3s；
过渡时间：.3s；
}
#share.list:hover a，#share.list.hover a
{
-webkit变换：缩放（1）平移3D（0,0,0）；
-moz变换：缩放（1）平移3D（0,0,0）；
-ms变换：缩放（1）平移3D（0,0,0）；
-o变换：缩放（1）平移3D（0,0,0）；
变换：缩放（1）平移3D（0,0,0）；
不透明度：1；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=100）；
-webkit转换持续时间：.3s、.4s、.4s；
-moz转换持续时间：.3s、.4s、.4s；
-毫秒转换持续时间：.3s、.4s、.4s；
-o-过渡持续时间：.3s、.4s、.4s；
过渡持续时间：.3s、.4s、.4s；
}
#share.list:hover.tw，#share.list.hover.tw
{
-webkit转换延迟：.1s、.0001s、.0001s；
-moz转换延迟：.1s、.0001s、.0001s；
-毫秒转换延迟：.1s、.0001s、.0001s；
-o-转换延迟：.1s、.0001s、.0001s；
转换延迟：.1s、.0001s、.0001s；
}
#share.list:hover.fb，#share.list.hover.fb
{
-webkit转换延迟：.2s、.0001s、.0001s；
-moz转换延迟：.2s、.0001s、.0001s；
-毫秒转换延迟：.2s、.0001s、.0001s；
-o-转换延迟：.2s、.0001s、.0001s；
转换延迟：.2s、.0001s、.0001s；
}
#share.list:hover.gp、#share.list.hover.gp
{
-webkit转换延迟：.3s、.0001s、.0001s；
-moz转换延迟：.3s、.0001s、.0001s；
-毫秒转换延迟：.3s、.0001秒、.0001秒；
-o-转换延迟：.3s、.0001s、.0001s；
转换延迟：.3s、.0001秒、.0001秒；
}

想要解决方案吗？？
twr fb G+

除了品牌/站点的徽标外，这与站点中的动画完全相同。 与链接中的代码相同

请看一下，希望这是你想要的

谢谢

---

Prashant

你能解释更多吗？你的问题是什么？你的小提琴似乎工作，除了一些小的CSS问题可能。。。你到底想做什么？在悬停事件中添加一个函数，并添加隐藏在页面加载中的div。你使用的是不透明度，而不是显示。我想让这个网站右侧的共享动画按钮完全相同。嗨，Prashant，感谢你的即时支持。非常感谢您的解决方案，与我想要的动画完全相同。在这个动画中，我还想做一件事，当鼠标悬停在所有共享分区上时

.share{
    background-color: #DA251D;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
}
.share .facebook,
.share .google-plus,
.share .twitter,
.share .line {
    display:none;
}
.facebook{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.google-plus{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.twitter{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.line{
    width: 1px;
    height: 200px;
    background-color: #000;
    position: absolute;
    left: 30px;
}

$(function(){
    $(".share").hover(function(){
        $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 200, opacity: 1, top:10},200);
        $(this).find(".facebook").delay(100).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
        $(this).find(".google-plus").delay(300).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
        $(this).find(".twitter").delay(500).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
    }, function(){
          $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 0, opacity: 0, top:-10},200)
          $(this).find(".facebook").delay(500).animate({width: 0, height: 0, opacity: 0},400);
          $(this).find(".google-plus").delay(300).animate({width: 0, height: 0, opacity: 0},400);
          $(this).find(".twitter").delay(100).animate({width: 0, height: 0, opacity: 0},400);
    });
});

 <style type="text/css">
    #share
    {
        display: none;
        position: absolute;
        right: 65px;
        top: 20px;
        line-height: 46px;
        padding-right: 59px;
    }
    #share .list
    {
        position: absolute;
        top: 0;
        right: 0;
        background: transparent;
    }
    #share .list strong, #share .list a
    {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        background: #fff;
        color: #3fbad8;
        margin: 0 0 6px;
        font-family: 'icomoon';
    }
    #share .list strong
    {
        cursor: default;
    }
    .ie9 #share .list strong
    {
        padding-top: 5px;
        height: 41px;
    }
    #share .list strong span
    {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 0;
        background: #fff;
        -webkit-transition: height .0001s linear;
        -moz-transition: height .0001s linear;
        -ms-transition: height .0001s linear;
        -o-transition: height .0001s linear;
        transition: height .0001s linear;
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a
    {
        background: #ff3;
        color: #000;
        -webkit-transition: -webkit-transform .0001s linear, background .0001s ease, color .0001s ease;
        -moz-transition: -moz-transform .0001s linear, background .0001s ease, color .0001s ease;
        -ms-transition: -ms-transform .0001s linear, background .0001s ease, color .0001s ease;
        -o-transition: -o-transform .0001s linear, background .0001s ease, color .0001s ease;
        transition: transform .0001s linear,background .0001s ease,color .0001s ease;
        -webkit-transform: scale(0) translate3d(0,0,0);
        -moz-transform: scale(0) translate3d(0,0,0);
        -ms-transform: scale(0) translate3d(0,0,0);
        -o-transform: scale(0) translate3d(0,0,0);
        transform: scale(0) translate3d(0,0,0);
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a:hover
    {
        background: #000;
        color: #fff;
        text-decoration: none;
    }
    #share .list .tw
    {
        font-size: 18px;
    }
    #share .list .fb
    {
        font-size: 32px;
    }
    #share .list .gp
    {
        font-size: 32px;
    }
    #share .list:hover strong span, #share .list.hover strong span
    {
        height: 135px;
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s;
        -moz-transition-duration: .3s;
        -ms-transition-duration: .3s;
        -o-transition-duration: .3s;
        transition-duration: .3s;
    }
    #share .list:hover a, #share .list.hover a
    {
        -webkit-transform: scale(1) translate3d(0,0,0);
        -moz-transform: scale(1) translate3d(0,0,0);
        -ms-transform: scale(1) translate3d(0,0,0);
        -o-transform: scale(1) translate3d(0,0,0);
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s,.4s,.4s;
        -moz-transition-duration: .3s,.4s,.4s;
        -ms-transition-duration: .3s,.4s,.4s;
        -o-transition-duration: .3s,.4s,.4s;
        transition-duration: .3s,.4s,.4s;
    }
    #share .list:hover .tw, #share .list.hover .tw
    {
        -webkit-transition-delay: .1s,.0001s,.0001s;
        -moz-transition-delay: .1s,.0001s,.0001s;
        -ms-transition-delay: .1s,.0001s,.0001s;
        -o-transition-delay: .1s,.0001s,.0001s;
        transition-delay: .1s,.0001s,.0001s;
    }
    #share .list:hover .fb, #share .list.hover .fb
    {
        -webkit-transition-delay: .2s,.0001s,.0001s;
        -moz-transition-delay: .2s,.0001s,.0001s;
        -ms-transition-delay: .2s,.0001s,.0001s;
        -o-transition-delay: .2s,.0001s,.0001s;
        transition-delay: .2s,.0001s,.0001s;
    }
    #share .list:hover .gp, #share .list.hover .gp
    {
        -webkit-transition-delay: .3s,.0001s,.0001s;
        -moz-transition-delay: .3s,.0001s,.0001s;
        -ms-transition-delay: .3s,.0001s,.0001s;
        -o-transition-delay: .3s,.0001s,.0001s;
        transition-delay: .3s,.0001s,.0001s;
    }
</style>

<p id="share" style="opacity: 1; display: block;">
    Want Solution <span class="list"><strong>?? <span></span>
    </strong><a class="tw">twr</a> <a class="fb">fb</a> <a class="gp">G+</a> </span>
</p>