JavaScriptとCSSホバーの問題

Question

段落要素の色を変更すると、CSSホバーの動作が停止します。

私が説明するデモを行った。https://jsfiddle.net/woan6b64/

私は<p>'s色を変更した後、ホバーセレクターが動作を停止します。

私の質問は：

• 私はJavaScriptでホバー効果を変更するにはどうすればよいですか？
• 色の変更後にホバリングを動作させるにはどうすればよいですか？

JSFiddleコードは：

var shift = 0; 
 

 
function change() { 
 
    if (shift === 0) { 
 
    document.getElementById("box").style.backgroundColor = "black"; 
 
    document.getElementById("text").style.color = "white"; 
 
    document.getElementById("text").innerHTML = 'Good! Now click the box again.'; 
 
    shift = 1; 
 
    } else { 
 
    document.getElementById("box").style.backgroundColor = "white"; 
 
    document.getElementById("text").style.color = "black"; 
 
    document.getElementById("text").innerHTML = 'Hover effect is now broken :('; 
 
    } 
 
}

#box { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: white; 
 
} 
 

 
p:hover { 
 
    color: green; 
 
}

<div id='box' onclick='change()'> 
 
    <p id='text'> 
 
    Click me for this box to change color. (Notice how I turn green when hovered) 
 
    </p> 
 
</div>

Answer 1

色を設定した後、ホバーが上書きされます。

p:hover{ 
    color: green !important; 
} 

Answer 2

は、それが特異性を有する問題ですので、あなたはそれを強制するために、色のプロパティに!importantを使用する必要があります：！それを強制することが重要使用します。

fiddle

NB：これはベストプラクティスではありません。あなたの意図に応じて、クラスを追加するか、単に色を設定解除するのが最善の選択肢かもしれません。

Answer 3

停止してください！必要でない場合は!importantを使用しないでください...あなたの問題は色を黒に設定することです。

document.getElementById("text").style.color = ""; 

これにより、カラーが正しいスタイルを継承します。

いずれにしても、これは適切な解決策ではありません。あなたはボックスにクラスを追加してから実行する必要があります。

#box { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: white; 
 
} 
 

 
p:hover { 
 
    color: green; 
 
} 
 

 
#box.altered { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
.altered p:hover { 
 
    color: red; 
 
}

<div id="box" onclick="this.classList.toggle('altered')"> 
 
    <p id='text'> 
 
    Click me for this box to change color. (Notice how I turn green when hovered) 
 
    </p> 
 
</div>

Answer 4

あなたがonmouseoverイベントとonmouseoutイベントをリッスンする必要があり、純粋なJSでそれをしたい場合は、私が作ったコードをチェック

var textElement = document.getElementById("text"); 
 
var defaultColor = textElement.style.color; 
 

 
textElement.onmouseover = function(event) { 
 
var currentElement = event.target; 
 
currentElement.style.color = "red"; 
 
} 
 

 
textElement.onmouseout = function(event) { 
 
var currentElement = event.target; 
 
currentElement.style.color = defaultColor; 
 
}

<div id="parent"> 
 
<p id="text"> 
 
I am a text that change its text color :D 
 
</p> 
 
</div>

Answer 5

新しいクラスを追加

// document.getElementById("box").style.backgroundColor = "black"; 
// document.getElementById("text").style.color = "white"; 
document.getElementById("text").classList.add("purple"); 

.purple { 
    color: purple; 
}