Javascript 显示类似facebook的&;鼠标悬停时的twitter跟随按钮
我正在尝试复制我的站点的社交媒体图标,类似于Hypebeast(),其中类似Facebook的按钮和twitter follow按钮仅在您将鼠标悬停在相应图标上时显示(请参见页面右上角的示例) 作为起点,我的社交图标的当前代码如下:Javascript 显示类似facebook的&;鼠标悬停时的twitter跟随按钮,javascript,jquery,html,css,facebook,Javascript,Jquery,Html,Css,Facebook,我正在尝试复制我的站点的社交媒体图标,类似于Hypebeast(),其中类似Facebook的按钮和twitter follow按钮仅在您将鼠标悬停在相应图标上时显示(请参见页面右上角的示例) 作为起点,我的社交图标的当前代码如下: <ul class="social-icons standard "> <li class="twitter"><a href="http://www.twitter.com/manofmanytastes" target="_blan
<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>
我对编码不是很有经验(自学成才,我的很多工作都是反复试验),是否有人可以解释或提供代码来实现这一点
如果我将iframe的元素状态强制为:hover,则可以强制like按钮显示,但如果我将鼠标悬停在图标或列表项区域上,则不显示
提前感谢你的帮助
编辑:似乎所有内容都已正确定位,但在加载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之外,其他一切似乎都工作正常&定位正确最初隐藏类似facebook的iframe:
.facebook-like{
display:none;
}
然后使用jQuery的.hover函数结合.toggle在悬停时切换iframe:
$(".facebook").hover(function(){$('.facebook-like').toggle()})
编辑:更新了JSFIDLE
JSFiddle:
谢谢吉姆!对于twitter的Follow按钮,您将如何进行此操作?代码是否相同?我是否将jQuery添加到wordpress中的functions表中?请查看更新的JSFIDLE以了解twitter的工作方式。看起来您的html也有一些问题。如果你想使用令人敬畏的字体,正确的类名是“fafafacebook”。你刚刚有了“fa facebook”。你还有两个“i”标签…不知道为什么。至于在wordpress中包含jQuery,我不知道该怎么做,您可以查看以下链接:再次感谢Jim。所有元素似乎都在那里,但我很难使用正确的javascript来切换悬停/显示状态。我已经编辑了上面的代码以向您展示我的意思。请尝试将$(document).ready(function($)更改为jQuery(document).ready(function($)
$(".facebook").hover(function(){$('.facebook-like').toggle()})