CSSボタン：ホバー、無効にしてからJavaScriptを無効にして再度有効にする

ホバリング時にボタンの色が暗くなるようなホバー効果を持つボタンがいくつかあります（CSSあり）。CSSボタン：ホバー、無効にしてからJavaScriptを無効にして再度有効にする

ユーザーがこれらのボタンをクリックすると、JavaScriptで無効になります。

プロシージャ（ゲーム）を再開して、JavaScriptを使用してボタンを再度有効にしたい場合、CSSボタン：ホバー効果はもう機能しません。

すべてのソリューションはありますか？

Javascriptを有効/無効ボタンの機能を有効にしている：

function jsEnableElement(id) { 

if (document.getElementById(id)) { 
    document.getElementById(id).style.background = "#3399FF"; 
    document.getElementById(id).style.cursor = "pointer"; 
    document.getElementById(id).disabled = false; 
} 

} 

function jsDisableElement(id) { 

if (document.getElementById(id)) { 
    document.getElementById(id).style.background = "#DDDDDD"; 
    document.getElementById(id).style.cursor = "default"; 
    document.getElementById(id).disabled = true; 
} 

}

出典

2011-12-08 user1087448

あなたが見ることができますが、あなたのボタンのHTMLくださいです... TA – ManseUK

<ボタンのIDは=「btnL1」タイプ=「提出」onclickの= "jsHangmanCheckLetter（ID、 'A'）;"><スパンID = "SPAN1"> – user1087448

と機能jsHangmanCheckLetter（SID、sLetter）{ \t試み{\t \t \t \t IF（g_GameIsActive == =真）{ \t \t \t jsDisableElement（sID）; \t \t} \t} \tキャッチ（ERR）{ \t \tアラート（ "ERROR :: sHangmanCheckLetter（sLetter）::" + ERR）。 \t} } – user1087448

は、私はあなたがそのIDまたはクラス名を保つ本家あなたは要素の背景色を変更すると動作が壊れる理由はわかりません。しかし、明らかにそうです。

これを修正する別の方法は、おそらくより良い方法は、要素のクラスを変更することです。

無効にする要素はわかりませんが、例としてDIVを使用しています。

http://jsfiddle.net/yVVk6/

をしかし、単にcompletnessのために私はここaswell

<html> 
<head> 
    <script> 
     function jsEnableElement(id) { 
      if (document.getElementById(id)) { 
       document.getElementById(id).removeAttribute("disabled"); 
       document.getElementById(id).className = "enabled"; 
       //document.getElementById(id).disabled = false; 
      } 
     } 

     function jsDisableElement(id) { 
      if (document.getElementById(id)) { 
       document.getElementById(id).removeAttribute("enabled"); 
       document.getElementById(id).className = "disabled"; 
       //document.getElementById(id).disabled = true; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div id="hallo" class="enabled" onclick="jsDisableElement('hallo');">Click me to disable</div> 
    <div onclick="jsEnableElement('hallo');">Click me to enable it again</div> 
</body>

CSSのコードを追加します：作業のデモはここで見つけることができます

.enabled { 
    background: #3399FF; 
} 
.enabled:hover { 
    background: #00FF66; 
} 

.disabled { 
    background: #DDD; 
}

編集：ちょっと別のもの私はmにしたいですあなたがこの解決策を見れば、本当にjQueryのようなライブラリを使うことをお勧めします。これにより、エレメントを簡単に編集、削除、または追加することができます。この例では、単に要素からすべてのクラスを削除します。私は以下に示すように、あなたが直接属性を与えることができると思い

出典

2011-12-08 10:21:55 w00

私はこれを試します、ありがとうございます！ – user1087448

ここでは、クラスを操作するための純粋なJavaScriptの方法です....非常に簡単.... http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – ManseUK

は魅力として動作します、ありがとうございました！ – user1087448

：

document.getElementById("btnL1").setAttribute("disabled","true") //to disable the button 
document.getElementById("btnL1").removeAttribute("disabled")  //enable it again

出典

2011-12-08 10:29:21

私はあなたが質問を誤解していると思う - 有効/無効の作品 - 問題は、css：hover属性が再び有効になった後に機能しないということです – ManseUK

CSSボタン：ホバー、無効にしてからJavaScriptを無効にして再度有効にする

答えて

関連する問題