Javascript 更改类名并不改变CSS_Javascript_Css_Transitions

Javascript 更改类名并不改变CSS

javascript css

Javascript 更改类名并不改变CSS,javascript,css,transitions,Javascript,Css,Transitions,我有一个简单的乒乓球游戏，当你按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

我有一个简单的乒乓球游戏，当你按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>

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的其余部分设置的特异性太高，请尝试：

#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;
}

#设置

特异性太高，请尝试：

#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。怎么了？如何使用jquery来促进淡入？请检查js错误控制台：

uncaughttypeerror:Object#没有方法“select”

（在您的实时站点上，现在），如果您确定类正在更改，那么这个问题完全是css问题。怎么了？如何使用jquery来促进淡入？请检查您的js错误控制台：

uncaughttypeerror:Object#没有方法“select”

（在您的实时站点上，现在）此外，当我单击设置链接时，一些东西正在设置上放置{display:none}。我尝试了，现在该框显示出来了。然而，它并没有进入它，而是直接进入完全不透明度。好了，明白了。我不得不删除display:none，只是将不透明度设为0。另外，当我单击设置链接时，有东西将{display:none}放在了#设置上。我尝试过了，现在这个框出现了。然而，它并没有进入它，而是直接进入完全不透明度。好了，明白了。我必须删除显示：无，只是使不透明度为0