0

我有一个简单的乒乓球游戏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'>&nbsp&nbsp&nbsp&nbsp&nbspRestart</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 的其余部分

4

1 回答 1

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;
}
于 2013-02-27T20:05:10.783 回答