CODEWITHSUNDEEP
javascripthtmlcss
Francisco Romero
Francisco Romero

Reputation: 13189

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!

Upvotes: 2

Views: 1360

Answers (2)

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Steveo
Steveo

Reputation: 557

You don't declare what wrapper is, try using this:

window.onload = function(){
    var container = document.getElementById('container'),
        text = document.getElementById('text'),
        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 = "";
      }
  };
}

Upvotes: 0

Related Questions