I have a button that has a color change when hovering. And in Script the button color changes when a click event occurs. However, Hover works when the page is loaded but after the color changes, it doesn't work. The code is below:
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "white";
count = 1;
} else {
property.style.backgroundColor = color;
count = 0;
}
}.button {
background-color: #4caf50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4caf50;
}
.button1:hover {
background-color: red;
color: black;
border: 2px solid #4caf50;
}<h2> Hoverable Buttons</h2>
<button id="buttonGreen" class="button button1" onclick="setColor('buttonGreen', '#122256')">
Green</button>After I click the button event occurs and the color changes to dark blue and the hover do not work.
button click adds inline styles which have higher priority due to that hover property changes are ignored. You can add !important to get rid of the issue
.button1:hover {
background-color: red !important;
color: black !important;
border: 2px solid #4caf50;
}
<html>
<head>
<style>
.button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4caf50;
}
.button1:hover {
background-color: red !important;
color: black !important;
border: 2px solid #4caf50;
}
</style>
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "white";
count = 1;
} else {
property.style.backgroundColor = color;
count = 0;
}
}
</script>
</head>
<body>
<h2>Hoverable Buttons</h2>
<button
id="buttonGreen"
class="button button1"
onclick="setColor('buttonGreen', '#122256')"
;
>
Green
</button>
</body>
</html>Inline styling (applied via style attribute) takes precedence over CSS applied styling (applied via class attribute).
Before click there was no background-color defined via style, after click there is which is overruling your CSS .button1:hover background-color. See documentation on CSS Specificity for more details on this topic.
To see the hover effect after clicking the button, try updating your .button1:hover to the following:
.button1:hover {
background-color: red !important;
color: black;
border: 2px solid #4caf50;
}
Note the use of !important which instructs the browser to give precedence over the inline styling.
⚠️ Using !important is generally not good practice therefore don't consider this to be a solution rather a topic to look into.
That occurs because you set background style white. Change this line in your condition. I would remove style elememnt. But you can set transparent background. What you are like!
if (count == 0) {
// property.style.backgroundColor = "white";
property.removeAttribute('style');
...
Working example
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.removeAttribute('style');
count = 1;
} else {
property.style.backgroundColor = color;
count = 0;
}
} .button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4caf50;
}
.button1:hover {
background-color: red;
color: black;
border: 2px solid #4caf50;
}<html>
<head>
<style>
</style>
<script>
</script>
</head>
<body>
<h2>Hoverable Buttons</h2>
<button
id="buttonGreen"
class="button button1"
onclick="setColor('buttonGreen', '#122256')"
;
>
Green1
</button>
</body>
</html>Note But better to use classes and then js toggle function.