javascript - 将悬停图标的文本更改为鼠标移出图标上的文本 - JQuery

Question

我正在尝试创建一个文本链接，当鼠标悬停在顶部时，它会变成 3 个显示社交网络的图标。当鼠标悬停在图标上时，图标必须在那里，当鼠标移开时，图标会消失并变为文本链接状态。

这是我的 fiddle ( http://jsfiddle.net/eccg8/1/ )。我有一些功能，但它有问题。鼠标移动时图标消失，静止时图标闪烁

感谢帮助

这是html

<div id="text_links">
    <a href="#" id="projects_link" class="menu_link">PROJECTS</a>
    <a href="#" id="contact" class="menu_link">CONTACT</a>
    <a href="#" id="social" class="menu_link">FOLLOW US</a>
</div>
<div id="social_buttons">
    <a href="#" id="skype"><img src="http://ticketcomunicacion.com/ticket/data/social/facebook-logo.png" id="skype-btn"></a>
    <a href="#" id="tumblr"><img src="http://ticketcomunicacion.com/ticket/data/social/facebook-logo.png" id="tumblr-btn"></a>
    <a href="#" id="facebook"><img src="http://ticketcomunicacion.com/ticket/data/social/facebook-logo.png" id="facebook-btn"></a>
</div>

CSS

.menu_link {
    margin-right: 10px;
    color: red;
    font-weight: bold;
}



#skype-btn, #facebook-btn, #tumblr-btn {
    width: 24px;
}

#social_buttons {
    position: absolute;
right: 260px;
top: 5px;
}


.hidden { display: none !important; }

和 JQuery

$().ready(function() {

$("#social_buttons").hide();

$( "#social" ).mouseover(function() {
      $("#social").addClass("hidden");
      $("#social_buttons").fadeIn("slow");
      setTimeout(function(){
        $("#social_buttons").hide();
        $("#social").removeClass("hidden");
      }, 5000);
    });


      var s = null;
      $( "#social_buttons" ).mouseout(function() {

        clearTimeout(s);
        $("#social_buttons").hide();

        s = setTimeout('$("#social").removeClass("hidden");', 100);
      });
});

Answer 1

当鼠标悬停在社交按钮上时试试这个:

$( "#social_buttons" ).mouseout(function() {
    clearTimeout(s);
    $(this).hide();
    //$("#social").removeClass("hidden");
    s = setTimeout('$("#social").removeClass("hidden");', 100);
  });

JSFIDDLE