Javascript onclick事件后如何保持悬停效果？

我正在尝试创建一个名为

#wrapper

的

div

，它有一个

悬停

事件，在该事件中它更改其

背景色

属性

在这个

wrapper

中，我有一些文本具有

opacity:0

，当我单击

容器时，将显示该文本（
opacity:1
）

我希望当单击
#wrapper
div时，它将保持与悬停时相同的颜色。如果再次单击，文本将消失，
#wrapper
的默认颜色将再次出现（来自其父项），并且
悬停
效果将再次生效

问题出现在这里，因为如果我点击
#包装器
，悬停效果就不再出现了

我想这与内联元素的数量有关（当我通过
Javascript
插入它时），但我不知道如何在触发
onclick
事件后仍然处理
hover
事件

以下是我目前掌握的代码：


window.onload=function（）{
var container=document.getElementById（'container'）；
var text=document.getElementById（'text'）；
container.onclick=function（）{
如果（text.style.opacity==0）{
text.style.opacity=1；
wrapper.style.backgroundColor=“红色”；
}
否则{
text.style.opacity=0；
wrapper.style.backgroundColor=“继承”；
}
};
}
html，正文{
宽度：100%；
}
#容器{
背景颜色：橙色；
}
#包装纸{
颜色：白色；
宽度：200px；
高度：200px；
}
#包装器：悬停{
背景色：红色；
}
#容器p{
不透明度：0；
过渡：0.5s；
}

某些内容
将其更改为
wrapper.style.backgroundColor=''


window.onload=function（）{
var container=document.getElementById（'container'）；
var text=document.getElementById（'text'）；
var wrapper=document.getElementById（'wrapper'）；
container.onclick=function（）{
如果（text.style.opacity==0）{
text.style.opacity=1；
wrapper.style.backgroundColor=“红色”；
}
否则{
text.style.opacity=0；
wrapper.style.backgroundColor=''；
}
};
}
html，正文{
宽度：100%；
}
#容器{
背景颜色：橙色；
}
#包装纸{
颜色：白色；
宽度：200px；
高度：200px；
}
#包装器：悬停{
背景色：红色；
}
#容器p{
不透明度：0；
过渡：0.5s；
}

某些内容
如果您没有声明什么是
包装器，请尝试使用以下方法：

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

非常感谢你！我现在注意到，正如@soloughlin3在他的回答中指出的那样，我没有引用任何元素
包装器
。我对Javascript真的很陌生，所以，为什么它被正确执行？@Error404：你应该添加一个引用，用它更新我的答案，尽管看起来大多数浏览器都会将文档中的每个id添加到其全局范围，因此它可以工作。是的，在我真正的项目中，我有它。在这里重新写的时候只是一个错误，但现在我对它的工作原理感到困惑。我还猜测它将每个ID与一个同名变量匹配，但找不到任何相关信息。现在我安全了。谢谢你的链接和答案！：）