0

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

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

我想要隐藏图标的效果,然后当用户将鼠标悬停在共享文本(或条目页脚本身)上时,图标显示为淡入/淡出效果。我已经对所有这些进行了排序,但是当用户将鼠标悬停在图标本身上时,图标绝对定位,共享文本上的颜色会变淡并且图标会闪烁。我在共享和条目页脚周围添加了一个填充,因此如果用户在此处附近的任何位置输入鼠标,图标就会出现,但是当用户浏览图标时,显然 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

4

1 回答 1

0

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

尝试

$(document).ready(function () {   
   $('.entry-footer').hover(function() {
     $('.really_simple_share').fadeIn(400);
   },
   function(){
     $('.really_simple_share').fadeOut(400);
   });
});
于 2013-03-20T11:28:22.563 回答