How to maintain hover effect after onclick event?

Question

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!

Asons · Accepted Answer · 2016-05-16T20:36:42.347

2

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>

edited May 16 '16 at 20:36

answered May 16 '16 at 16:05

Asons

84,923
12
110
165

Thank you very much! I notice now that I am not referencing `wrapper` to any element as @soloughlin3 points me out in his answer. I am really new on Javascript so, why it is being executed correctly? – Francisco Romero May 16 '16 at 19:56
1

@Error404: You should add a reference, updated my answer with that, though it appears most browsers add each id in the document to its global scope, [chech this post](http://stackoverflow.com/a/6853267/2827823), hence it works. – Asons May 16 '16 at 20:34
Yes, on my real project I had it. Just a mistake when re-writing it here but now I was confused about how it could be working. I also guess that it matches each ID with a variable with the same name but could not find anything about that. Now I am secure. Thanks for the link and for the answer! :) – Francisco Romero May 16 '16 at 23:21

score 0 · Answer 2 · answered May 16 '16 at 16:06

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 = "";
      }
  };
}

How to maintain hover effect after onclick event?

2 Answers2