Question

我正在尝试创建一个文本链接，当鼠标位于顶部时，它会显示3个显示社交网络的图标。当鼠标位于其上时，图标必须在那里，当鼠标移出时，图标必须消失到文本链接状态。

这是我的小提琴（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

在悬停时更改图标文本，然后在鼠标移出图标上更改文本 - JQuery

1 个答案: