我对 css/jQuery 中的菜单有疑问， 在 Firefox 中工作正常，但在 IE、Opera、Chrome 中...当我将鼠标悬停在元素上时，它会移动到页面的左边缘...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css"> .outer {width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036; }.inner {overflow: hidden;width: 100px;} .modal {display: none;} .modal-inner {width: 600px;margin: 100px auto;height: 300px;background: #fff !important;border: 12px solid rgba(222, 222, 222, 0.8);z-index: 999999;border-radius: 5px;}.backdrop {z-index: 999998;}</style>
</head>
<body>
<div class="outer">
<div class="inner" style="">Subscription</div>
</div>
<script type="text/javascript">
$('.outer').on('mouseenter', function () {
$(this).animate({ left: "-=100", width: "+=100" });
});
$('.outer').on('mouseleave', function () {
$(this).delay(200).animate({ left: "+=100", width: "-=100" });
});
$('.outer').click(function () {
$('.outer').animate({ left: "+=146" });
$('.modal').modal();
});
</script>
<div class="modal">
<div class="modal-inner">
Lorem ipsum
</div>
</div>
</body>
</html>
我哪里做错了？
最佳答案
这是因为我认为 firefox 非常擅长猜测 .outer 的左偏移值(当它没有明确指定时)所以 $(this).animate({ left : "-=100", width: "+=100"}); 完美运行。在其他浏览器的情况下，左侧未定义且未自动计算，因此动画会导致其立即设置为 0，然后在左侧进行动画处理，该动画被剪裁且未显示。
在此解决方案中，我们将 left 显式设置为 100%，并添加等于 div.outer 宽度的负边距以正确定位它。
像这样
.outer {
width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036;
//add this
left:100%;
margin-left: -46px;
}
关于jQuery 鼠标悬停在 IE、Opera、Chrome 中的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14782567/