JavaScript and CSS hover issue

Question

When changing a color of a paragraph element, CSS hover stops working.

I made a demo to explain: https://jsfiddle.net/woan6b64/

After I change <p>'s color, the hover selector stops working.

My question is:

How can I change the hover effect with JavaScript?
How can I get hovering to work after a color change?

JSFiddle code:

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>

yes, it is an option @Syden

captincrunch
– captincrunch

2017-09-27 00:56:20 +00:00
Commented Sep 27, 2017 at 0:56 — captincrunch
– captincrunch, Commented Sep 27, 2017 at 0:56

Akxe · Accepted Answer · 2017-09-27 13:11:53Z

4

Stop it! Don't use !important if not necessary... your problem is that you set the color to black.

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

This will make the color inherit the right style.

How ever, this ain't the right solution either. You should add class to the box and then do:

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

edited Sep 27, 2017 at 13:11

answered Sep 27, 2017 at 1:02

Akxe

11.8k6 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jhpratt Over a year ago

Sure, but it also depends whether they want green on hover after being clicked the first time. That wasn't specified in the original question.

Akxe Over a year ago

True, still adding class is much better option, and adding important to the green will make it work only with green... so

jhpratt Over a year ago

Yeah, a class is definitely the best option! All depends on the original goal, really.

jhpratt · Accepted Answer · 2017-09-27 01:10:14Z

1

Add a new class

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

.purple {
  color: purple;
}

edited Sep 27, 2017 at 1:10

jhpratt

7,15016 gold badges43 silver badges53 bronze badges

answered Sep 27, 2017 at 1:05

Alex

11.6k7 gold badges39 silver badges52 bronze badges

1 Comment

jhpratt Over a year ago

The way you did it would've worked, but this way is much cleaner and prevents adding it a second time.

Juorder Gonzalez · Accepted Answer · 2017-09-27 01:05:40Z

0

If you want to do it with pure JS you need to listen for onmouseover event and onmouseout event, check the code that I made

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>

answered Sep 27, 2017 at 1:05

Juorder Gonzalez

1,6521 gold badge10 silver badges10 bronze badges

Comments

jhpratt · Accepted Answer · 2017-09-27 01:07:52Z

0

It's an issue with specificity, so you'll need to use !important on the color property to force it.

fiddle

NB: This isn't best practice. Depending on your intent, adding a class or simply unsetting the color may be the best option.

edited Sep 27, 2017 at 1:07

answered Sep 27, 2017 at 0:59

jhpratt

7,15016 gold badges43 silver badges53 bronze badges

Comments

David · Accepted Answer · 2017-09-27 00:59:22Z

-1

After setting the color, the hover is overridden. Use !important to force it:

p:hover{
  color: green !important;
}

answered Sep 27, 2017 at 0:59

David

4353 silver badges8 bronze badges

2 Comments

Akxe Over a year ago

This ain't right! Don't use important if not strictly necessary this is bad practice...

Obsidian Age Over a year ago

While this is the solution, !important should be used as a last resort. You should make use of higher specificity instead :)

Collectives™ on Stack Overflow

JavaScript and CSS hover issue

5 Answers 5

3 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related