Css IE在悬停显示的元素时闪烁
我在尝试制作一个只显示我的社交媒体按钮的标记解决方案时遇到了麻烦。我有两个facebook和twitter的占位符按钮,我想设置它,这样当用户将鼠标悬停在占位符上时,占位符会淡出,共享按钮会淡入 现在,我在所有好的浏览器中都能很好地使用它,但当然,IE(每个版本)都不喜欢它。当按钮淡入时,任何鼠标移动都会导致按钮闪烁,就像IE无法确定鼠标是否仍在悬停的元素上一样 我的意思是: 以及任何不想离开堆栈的人的代码:Css IE在悬停显示的元素时闪烁,css,internet-explorer,Css,Internet Explorer,我在尝试制作一个只显示我的社交媒体按钮的标记解决方案时遇到了麻烦。我有两个facebook和twitter的占位符按钮,我想设置它,这样当用户将鼠标悬停在占位符上时,占位符会淡出,共享按钮会淡入 现在,我在所有好的浏览器中都能很好地使用它,但当然,IE(每个版本)都不喜欢它。当按钮淡入时,任何鼠标移动都会导致按钮闪烁,就像IE无法确定鼠标是否仍在悬停的元素上一样 我的意思是: 以及任何不想离开堆栈的人的代码: <div class="share-buttons-wrapper"&g
<div class="share-buttons-wrapper">
<div class="buttons-wrapper">
<div class="facebook share-button">F</div>
<div class="twitter share-button">T</div>
<div class="rendered-buttons">
<div class="fb-like" data-send="false" data-width="450" data-show-faces="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button"></a>
</div>
</div>
</div>
.share-buttons-wrapper{
float:left;
border-left:1px solid #dfdfdf;
height:75px;
width:55px;
padding-left:20px;
position:relative;
}
.share-buttons-wrapper > .buttons-wrapper
{
cursor:pointer;
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=196749420435782";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
F
T
.共享按钮包装{
浮动:左;
左边框:1px实心#dfdfdf;
高度:75px;
宽度:55px;
左侧填充:20px;
位置:相对位置;
}
.share buttons wrapper>.buttons wrapper
{
光标:指针;
(功能(d、s、id){
var js,fjs=d.getElementsByTagName[0];
if(d.getElementById(id))返回;
js=d.createElement;js.id=id;
js.src=“//connect.facebook.net/en_US/all.js#xfbml=1&appId=196749420435782”;
fjs.parentNode.insertBefore(js,fjs);
}(document,'script','facebook jssdk');!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http://.test(d.location)'http:'https';if(!d.getElementById(id)){js js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}(document,'script,'wjs');
我真的要在这里失去它了。我怎样才能让它工作呢
另外-我也尝试了jQuery,因为我很沮丧,但似乎将鼠标移动到共享按钮(即iframe)中会破坏它。所以我猜js似乎是iframe的内容在悬停元素之外?我不知道。添加一个额外的脚本似乎可以修复它
Js冒泡可以很方便哪些IE版本会导致问题?所有这些,不幸的是,像你这样的人过于复杂化了,我会重新开始,在JSFIDLE中完成这一切,没有Js或iFrame,如果你想要淡入淡出,你可以使用css转换。好吧,我必须使用Js和iFrame,因为FB和Twitter就是用它来呈现问题的ir共享按钮。我开始认为IE看到鼠标移动到iframe中,因为它从dom元素中移出,这会导致闪烁/中断,所以没有标记唯一的方法来实现这一点,嗯?在css中,你只能向下遍历dom,而不能向上遍历?所以我将得出我的结论,iframe内容被认为是dom元素之外的内容我吓坏了,谢谢!
$(".buttons-wrapper").hover(
function () {
$(".rendered-buttons").css("visibility","visible");
},
function () {
$(".rendered-buttons").css("visibility","hidden");
}
);