[SOLVED] Why the use of JS to change 'style.display' of elements overrides CSS 'hover' pseudo class behaviour?

Question

Hello SoloLearners,

I'm working on a code that has some fieldset elements with a hidden span in each. And I use 'hover' pseudo class to show the span when a certain fieldset was being hovered on.

And then I added checkbox which toggles the spans visibility ( style.display ) using JS.

The problem with the code after adding the toggle checkbox is, once I use the checkbox to toggle spans' visibility, the spans are no longer showing up when the hosting fieldset is hovered on.

Can anyone please explain why this is happening, and suggest how do I overcome this issue?

Here's the code link,
And Thank you, in advance

https://code.sololearn.com/Wjtnl6HWIMIm/?ref=app

Answer 1

Inline style (span.style.display) has the highest priority and will override external and internal styles and browser defaults.
https://www.w3schools.com/css/css_howto.asp

You can replace "none" with "", at line 128 of your code, to resolve the problem.

https://code.sololearn.com/W5Hc4IIEQxUw/?ref=app

Edited
Replacing "none" with null is probably more appropriate

Answer 2

Inline styles beats any other style declaration, unless declared with !important keyword.

when usin the style attribute of al element via JS, it adds it as inline. So before clicking the show all checkbox, the span.style.display="".
after you you check and uncheck span.style.display="none"

and since its now inline its not overriden by a declaration up above in the cascade (external stylesheet).

thats why as ODLNT sugges replace that "none" for "" because empty string is undefined.

Sometimes toggling a class that has those declarations is better.

Answer 3

Thank you very much Arturop , ODLNT for showing me this. I should keep a note on CSS rule priority levels next time : )