我有一个简单的乒乓游戏http://shodor.org/~amalani/Pong%203.1/,当你按P或点击设置按钮时,我试图通过更改类名来使设置div淡入。类名更改,但CSS未更新。代码是
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='main.css' type='text/css' rel='stylesheet'>
<meta name="viewport" content="width=device-width"/>
<script src='game.js' type='text/javascript'></script>
<title>Pong Game</title>
</head>
<body onMouseMove='mouse()' onTouchStart='mouse()' onLoad='ball()' onkeydown="move(event); this.select()" >
<div id='wrap' onKeyDown='move();'>
<canvas id='level' width=600px height = 25px ></canvas><br>
<div id='canvasWrap'>
<div id='options'>
<a href='#' class='links'><span id='pause' class='options' onClick='pause()'>Settings</span></a>
<span id='restart' class='options'>     Restart</span>
<br><br><div id='settings' class='visible'>
<span><b>Controls:</b></span><br>
<span>adsfasdfasdfasdf</span>
</div>
</div><br>
<canvas id='canvas' width=600px height=400px >If you can see this, please enable Javascript or switch to a newer browser</canvas>
</div>
<span id='score'></span>
<button type='button' onClick='show()'>Show change</button><br>
<span id='myspan'></span>
<script type='text/javascript' src='global.js'></script>
</div>
<script>
</script>
</body>
</html>
相关的javascript是
var settings = document.getElementById('settings');
function pause() {
//Toggle pause
if (time && !lost) {
time = false;
settings.className = 'seen';
} else if (!lost) {
time = true;
document.getElementById('settings').style.display = 'none';
}
ball();
}
CSS
@CHARSET"UTF-8";
canvas {
border:1px solid black;
position:relative;
top:0px;
}
#wrap {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
}
#canvaswrap {
width:600px;
height:600px;
margin:10px;
padding:10px;
}
#options {
background-color:black;
color:lightgrey;
position:relative;
width:600px;
top:20px;
text-align:center;
z-index:1;
}
.options:hover {
color:white;
}
#settings {
display:none;
position:absolute;
width:599px;
height:400px;
background-color:lightgrey;
color:white;
opacity:0;
}
#settings>a:link {
color:white;
text-decoration:none;
}
.links {
color:lightgrey;
text-decoration:none;
}
.seen {
display:block;
opacity: 1;
color:pink;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}
基本上,这个类肯定会改变,但CSS不是。如果您认为这是原因,我可以发布我的其他Javascript
答案 0 :(得分:3)
#settings
特异性很高,请尝试:
#settings.seen {
display:block;
opacity: 1;
color:pink;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
}