Question

我正在创建一个wordpress博客，并使用了'非常简单的facebook twitter分享按钮（http://wordpress.org/extend/plugins/really-simple-facebook-twitter-share-buttons/）

在设置中，我选择查看帖子下面的共享图标，我有一个输入页脚。该插件实际上将图标放在入口页脚上方，所以我必须绝对定位它们并将它们向下移动。

我想要隐藏图标的效果，然后当用户将鼠标悬停在共享文本（或输入页脚本身）上时，图标显示为fadeIn / fadeOut效果。我已将所有这些排序，但是当用户将鼠标悬停在图标上时，图标绝对定位，共享文本上的颜色会消失，图标会闪烁。我在共享和入口页脚周围添加了一个填充，因此如果用户在此处附近的任何地方输入鼠标，则会显示图标，但是当用户查看图标时，显然jQuery认为他们已离开此区域并且正在淡出。如果有人可以帮我解决这个问题，我将不胜感激。

以下是支持代码：

jQuery的：

$(document).ready(function () {   
   $('.entry-footer').mouseover(function() {
     $('.really_simple_share').fadeToggle(400);
   });
 });

的CSS：

.entry-footer a{
  height:88px;
}

h1.share a{
  padding:30px 560px 40px 30px;
  float:left;
}

.entry-footer a:hover {
  color:#79b74c;
}

.really_simple_share {
    position:absolute;
    margin:44px 0px 0px 140px;
    display:none;
}

我还在这里发布了一个问题，关于帖子顶部和底部的图标以及无法在页脚内移动的问题：http://wordpress.org/support/topic/social-icons-showing-twice-in-posts?replies=1#post-3994811

Answer 1

当您将鼠标悬停在对象上时触发fadeToggle。这意味着如果你的鼠标停留在它上面会不断褪色。

尝试

$(document).ready(function () {   
   $('.entry-footer').hover(function() {
     $('.really_simple_share').fadeIn(400);
   },
   function(){
     $('.really_simple_share').fadeOut(400);
   });
});

Jquery Fadein切换保持闪烁（使用wordpress）

1 个答案: