更改类名不会更改CSS

Question

I have a simple pong game http://shodor.org/~amalani/Pong%203.1/ , and when you press P or click the settings button, I am trying to make the settings div fade in by changing the classname. 我有一个简单的pong游戏http://shodor.org/~amalani/Pong%203.1/ ，当您按P或单击设置按钮时，我试图通过更改类名来使设置div淡入。 The classname changes, but the CSS is not updating. 类名已更改，但是CSS并未更新。 The code is 该代码是

<!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>

The pertaining javascript is 有关的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();
}

The CSS is 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;
}

Essentially, the class is certainly changing, but the CSS is not. 本质上，该类肯定会发生变化，但是CSS不会发生变化。 I can post the rest of my Javascript if you think that it is the cause 如果您认为这是原因，我可以发布我的Javascript的其余部分

Answer 1

The #settings specificity is to high, try: #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;
}

更改类名不会更改CSS

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-02-27 20:05:10

更改类名不会更改CSS

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-02-27 20:05:10

解决方案1
3 已采纳 2013-02-27 20:05:10