클래스 이름을 변경해도 CSS가 변경되지 않습니다

간단한 폰 게임 http://shodor.org/~amalani/Pong%203.1/이 있습니다. P를 누르거나 설정 버튼을 클릭하면 클래스 이름을 변경하여 설정 div를 페이드 인하려고합니다. 클래스 이름은 변경되지만 CSS는 업데이트되지 않습니다. 이 코드는 관련된 자바 스크립트는 클래스가 확실히 변화의 CSS는 본질적으로클래스 이름을 변경해도 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; 
}

입니다

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는 아니다

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

입니다. 당신이

출처

2013-02-27 scrblnrd3

당신이 클래스가 변경되어 있는지 확인하는 경우 다음이 문제는 엄격하게 CSS입니다 . 그게 뭐가 잘못 됐어? 주황색으로 jquery를 사용하여 페이드 인을 촉진 하시겠습니까? – ProfileTwist

js 오류 콘솔을 확인하십시오 :'Uncaught TypeError : Object # 에는 'select'(현재 라이브 사이트에서) 메서드가 없습니다 – bfavaretto

#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-27 20:05:10 xpy

또한 {display : none}을 #settings에 두었습니다. 설정 링크. – isherwood

나는 그것을 시도하고 지금 상자가 나타납니다. 그러나이 기능을 사용하기 쉽지 않고 대신 완전히 불투명하게 바로 이동합니다. – scrblnrd3

알았어. 나는 디스플레이를 제거해야했다 : none 그리고 불투명도를 0으로 만든다. – scrblnrd3

클래스 이름을 변경해도 CSS가 변경되지 않습니다

답변

관련 문제