在悬停时显示 facebook 和 twitter 关注按钮

Question

我正在尝试为我的网站复制类似于 Hypebeast (http://hypebeast.com) 的社交媒体图标，其中 Facebook 点赞按钮和 Twitter 关注按钮仅在您将鼠标悬停在相应图标上时显示（参见示例在页面的右上角）。

作为起点，我的社交图标的当前代码如下：

<ul class="social-icons standard ">
<li class="twitter"><a href="http://www.twitter.com/manofmanytastes" target="_blank"><i class="fa-twitter"></i><i class="fa-twitter"></i></a></li>
<li class="facebook"><a href="http://www.facebook.com/manofmanytastes" target="_blank"><i class="fa-facebook"></i><i class="fa-facebook"></i></a><iframe class="facebook-like" src="//wwww.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanofmanytastes&width=150&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=604369196250500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowtransparency="true"></iframe></li>
<li class="instagram"><a href="http://instagram.com/http://instagram.com/manofmanytastes" target="_blank"><i class="fa-instagram"></i><i class="fa-instagram"></i></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/ManOfMany" target="_blank"><i class="fa-rss"></i><i class="fa-rss"></i></a></li>
</ul>

Facebook iframe 的 CSS 是：

#header li.facebook iframe.facebook-like {
position: absolute;
top: -30px;
left: -27px;
display: none;
}

#header li.facebook iframe.facebook-like:hover {
display: block;
}

我在编码方面不是很有经验（自学成才，我的很多都是反复试验）无论如何有人可以解释或提供代码以使其在 http://jsfiddle.net/

中工作

如果我强制 iframe 的元素状态为 :hover，但如果我将鼠标悬停在图标或列表项区域上，我可以强制显示“赞”按钮吗？

在此先感谢您的帮助。

编辑： 一切似乎都正确定位，但我无法加载 javascript 以在悬停时切换显示状态。

我已将以下内容保存在我的子主题目录文件夹中的 social-popup.js

$(document).ready(function($) {
// Your jQuery code goes here. Use $ as normal.
   $(".facebook").hover(function(){$('.facebook-like').toggle();});
$(".twitter").hover(function(){$('.twitter-follow').toggle();});
});

然后我将其添加到子目录中的 functions.php 文件中：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/social-popup.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

除了 Javascript

之外，其他一切似乎都工作正常并且位置正确

Answer 1

最初像iframe一样隐藏facebook:

.facebook-like{
    display:none;
}

然后使用 jQuery 的 .hover 函数结合 .toggle 在悬停时切换 iframe：

$(".facebook").hover(function(){$('.facebook-like').toggle()})

EDIT: Updated the JSFiddle

JSFiddle:

http://jsfiddle.net/s9ts65f6/3/

在悬停时显示 facebook 和 twitter 关注按钮

Show facebook like & twitter follow buttons on hover

html

javascript

css

jquery

facebook