On hover display span

by winddweb

HTML

<body>
    <div class="share_wrap clearfix">
                              <span class="label">share: </span>
                              <span class="twitter_link">
                              <a class="page_share" href="https://twitter.com/intent/tweet?text=Yifeng+Huang+--+Web+Worker%2C+Photographer&url=http%3A%2F%2Fwww.pitt.edu%2F~yih29%2F">Tweet</a><span class="link_info">Share with </span>
                              </span>

                              <span class="facebook">
                                  <a class="page_share" href=" http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.pitt.edu%2F~yih29%2F&t=Yifeng+Huang+--+Web+Worker%2C+Photographer" title="">facebook</a><span class="link_info">Share with </span>
                              </span>
                              
                              <span class="linkedInx-share">
                                  <a class="page_share" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwww.pitt.edu%2F~yih29%2F&title=Yifeng+Huang+--+Web+Worker%2C+Photographer&summary=Yifeng+Huang+--+Web+Worker%2C+Photographer&source=Yifeng+Huang">LinkedIn</a><span class="link_info">Share with </span>
                              </span>

</div><!--/share wrap--> 

<span class="link_info">Share with </span>
</body>

CSS

/* sharing buttons, google tweet like linkedin*/

.facebook_like {
  width: 48px;
}
.linkedIn {
  width: 60px;
}
.g-plus {
  float: right;
}
.share_wrap {
  text-align: center;
  height: auto;
  margin: 5% 0;
  width: 240px;
  padding: 1% 1% .5%;
  position: relative;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background: #ffffff url(http://www.pitt.edu/~yih29/img/bg_s2.png);
  box-shadow: inset 0 1px 6px #333;
  line-height: .8em;
}
.share_wrap .facebook, .share_wrap .twitter_link, .share_wrap .linkedInx-share {
     position:relative;
  width: auto;
  height: 19px;
  margin: 5px;
  padding: 0;
  display: block;
  vertical-align: middle;
  overflow: visible;
  float: right;
  border: solid #666666 1px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
}
.share_wrap .facebook a, .share_wrap .twitter_link a, .share_wrap .linkedInx-share a {
  background: url(http://www.pitt.edu/~yih29/img/icon/share_sprite3.png) no-repeat;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
}
.share_wrap .facebook a {
  background-position: 0 -19px;
}
.share_wrap .facebook a:hover {
  background-position: -33px -19px;
}
.share_wrap .twitter_link a {
  background-position: 0 0px;
}
.share_wrap .twitter_link a:hover {
  background-position: -33px 0px;
}
.share_wrap .linkedInx-share a {
  background-position: 0 -38px;
}
.share_wrap .linkedInx-share a:hover {
  background-position: -33px -38px;
}
.share_wrap a {
  color: #fff;
  width: 33px;
  height: 19px;
  padding: 0;
  font-size: .6em;
  font-family: Arial;
  display: block;
  vertical-align: middle;
  text-shadow: 0 0 1px #591010;
  text-indent: 99999px;
}
.g-plus > div {
  vertical-align: top !important;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.label{
    font-size:18px;
   ...

JavaScript

$(function(){
        $('a.page_share').on('click',function(e){
            window.open($(this).attr('href'),'Yifeng','width=700,height=450,status=no,location=no');
            e.preventDefault();
        });


    
            
        $('.page_share').on('mouseover',function(){
            $(this).after('');
        });
        
    $('.page_share').hover(function(){
        $(this).next('.link_info').stop().fadeTo(400,1);
    },function(){
        $(this).next('.link_info').stop().fadeTo(400,0);        
    });
      
    $('.page_share').append(function(){
   return '<span class="link_info">Share with'+ $(this).text() +'</span>';
});
});