Question

我已经将一个像facebook一样的按钮插入到一个div中，它将自己隐藏在屏幕上，直到你将鼠标悬停在它上面：

<div id="fb">Some text here<br />
<div class="fb-like" data-href="http://etc..." data-layout="button" data-action="like" data-show-faces="false" data-share="false" data-colorscheme="dark"></div></div>

使用这个CSS：

#fb {
    display:block;
    background:url(images/facebook.png) right no-repeat #000;
    color:#FFF;
    height:89px;
    width:280px;
    position:absolute;
    top:20px;
    left:0px;
    padding-right:22px;
    margin-left:-280px;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    font-size:10px;
    border:solid 1px #E3D199;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-top:5px;
    padding-bottom:5px;
    overflow:hidden;
}
#fb:hover {
    margin-left:0px;
    overflow:visible;
}

问题在于，当我将鼠标放在Internet Explorer中的父div上时，它会像平常一样滚出来，但是当我像facebook一样滚动facebook时，它会在我获得之前返回到原来的“屏幕外”状态有机会点击类似按钮...

任何人都可以帮助我弄明白当我将鼠标移到屏幕上时如何将我的div保持在屏幕上。

Answer 1

我现在无法在IE中测试，但您可能想尝试：

#fb {
    display:block;
    background:url(images/facebook.png) right no-repeat #000;
    color:#FFF;
    height:89px;
    width:280px;
    position:absolute;
    top:20px;
    left:0px;
    padding-right:22px;
    margin-left:-280px;
    -webkit-transition:all .5s ease-out;
       -moz-transition:all .5s ease-out;
         -o-transition:all .5s ease-out;
            transition:all .5s ease-out;
    font-size:10px;
    border:solid 1px #E3D199;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-top:5px;
    padding-bottom:5px;
    overflow:hidden;
}

亚历

Answer 2

试试：

<style>    
.zor{z-index:-1;}
</style>

....
<div class="zor">
<div class="fb-like zor" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
</div>
...

Answer 3

如果您想使用javascript，请尝试（已测试）：

<script>
function SetMarginLeft(v){
mm = document.getElementById("fb").style;
mm.marginLeft=v;
}
</script>

...
<div id="fb" onMouseOut="SetMarginLeft('-280px');" onMouseOver="SetMarginLeft('0px');">Some text here<br />
<div class="fb-like" data-href="http://etc..." data-layout="button" data-action="like" data-show-faces="false" data-share="false" data-colorscheme="dark"></div>
</div>
...

像Div这样的FB在IE中删除悬停状态时

3 个答案: