在我的网站上，我在左上角有一个悬停条，当你将鼠标悬停在它上面时，它会向外过渡并显示一个按钮，你可以按下该按钮以显示更多选项，但是当你突然将鼠标悬停在上面并再次离开时，它看起来不平滑，因为按钮不会随着 div 消失，当 div 消失时按钮会变成正方形。我该如何修复它？
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}
$(document).ready(function() {
$("button").click(function() {
$('.mercury-lines').toggle();
});
});
$(document).ready(function() {
$("#fade").hover(function() {
$("button").fadeToggle(1500);
});
});html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
#fade {
width: 20px;
height: 100px;
background: #848484;
transition: width 2s;
-webkit-transition: width 2s;
/* Safari 3.1 to 6.0 */
position: absolute;
border-radius: 10%;
top: 10px;
left: -8px;
opacity: 0.6;
filter: alpha(opacity=60);
}
#fade:hover {
width: 200px;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 3px;
left: 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
display: none;
}
.mercury {
position: absolute;
height: 18px;
/*25px for both*/
width: 18px;
margin-left: 25px;
border-radius: 50%;
/*box-shadow: green 0 0 25px;*/
}
.mercury-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -101px;
margin-top: -101px;
-webkit-animation: spin-left 30s linear infinite;
}
.mercury-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 225px;
width: 225px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -34px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-left 4s linear infinite;
}
@-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body onload="myFunction()">
<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="mercury-lines">
</div>
<div class="mercury-orbit ">
<img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" />
</div>
<div id="fade">
<button id="button-change">Toggle Orbits</button>
</div>
</body>
</html>最佳答案
为您的 css 中的每个 #fade 和 #button-change 添加这个
#fade{
overflow:hidden;
}
并将宽度分配给按钮
#button-change{
width: 100px;
}
但是让我说这不是一个好的解决方案..你可以留出#fade 的边距并为其设置动画..我认为它会更好
DEMO HERE Using js 在 CSS 中
#fade{
margin-left :-180px;
}
在 js 中
$(document).ready(function(){
$('#fade').on('mouseenter',function(){
$(this).stop().animate({'margin-left':'0px'},2000);
});
$('#fade').on('mouseleave',function(){
$(this).stop().animate({'margin-left':'-180px'},2000);
});
});
并在一个 $(document) 中使用所有代码。准备好了，无需重复
DEMO HERE Using css你可以用纯 CSS 做到这一点
#fade{
margin-left :-180px;
transition-duration: 2s;
}
#fade:hover{
margin-left: 0px;
transition-duration: 2s;
}
关于javascript - 自动隐藏按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27346695/