Error404 Error404 - 6 months ago 16
HTML Question

How to maintain hover effect after onclick event?

I am trying to create a

div
named
#wrapper
that has an
hover
event, in which it changes its
background-color
property.

Inside this
wrapper
I have some text that has
opacity: 0
and when I click on the
container
, this text will be show (
opacity: 1
).

I would like that when the
#wrapper
div will be clicked, it will stay with the same colour that it has when it is hovered. If you click again, the text will disappear and the default colour of the
#wrapper
will come again (from its parent) and the
hover
effect should work again.

The problems comes here, because if I click on the
#wrapper
the hover effect does not come anymore.

I guess it is something related about specifity of inline elements (when I insert it via
Javascript
) but I do not have any idea about how to still handle the
hover
event after the
onclick
event has been triggered.

Here is the code I have by the moment:



window.onload = function(){
var container = document.getElementById('container');
var text = document.getElementById('text');

container.onclick = function(){
if(text.style.opacity == 0){
text.style.opacity = 1;
wrapper.style.backgroundColor = "red";
}
else{
text.style.opacity = 0;
wrapper.style.backgroundColor = "inherit";
}
};
}

html,body{
width: 100%;
}

#container{
background-color: orange;
}

#wrapper{
color: white;
width: 200px;
height: 200px;
}

#wrapper:hover{
background-color: red;
}

#container p{
opacity: 0;
transition: 0.5s;
}

<div id="container">
<div id="wrapper">
<p id="text">Some content</p>
</div>
</div>





How can I handle the
onclick
event to not override the
hover
event when the
#wrapper
div has the default
background-color
(the second time you
onclick
on the
#wrapper
)?

Note: I only want to use Javascript.

Thanks in advance!

Answer

Change it to wrapper.style.backgroundColor = '';

window.onload = function(){
  var container = document.getElementById('container');
  var text = document.getElementById('text');
  var wrapper = document.getElementById('wrapper');

  container.onclick = function(){
    if(text.style.opacity == 0){
      text.style.opacity = 1;
      wrapper.style.backgroundColor = "red";
    }
    else{
      text.style.opacity = 0;
      wrapper.style.backgroundColor = '';
    }
  };
}
html,body{
  width: 100%;
}

#container{
    background-color: orange;
}

#wrapper{
  color: white;
  width: 200px;
  height: 200px;
}

#wrapper:hover{
  background-color: red;
}

#container p{
  opacity: 0;
  transition: 0.5s;
}
<div id="container">
  <div id="wrapper">
    <p id="text">Some content</p>
  </div>
</div>