Question

我正在尝试创建一个名为div且名为#wrapper的{{1}}事件，该事件会更改其hover属性。

在此background-color内，我有一些文字wrapper，当我点击opacity: 0时，此文字将会显示（container）。

我希望当点击opacity: 1 div时，它将保持与其悬停时相同的颜色。如果再次单击，文本将消失，#wrapper的默认颜色将再次出现（来自其父级），#wrapper效果应该再次起作用。

问题来了，因为如果我点击hover，悬停效果就不会再出现了。

我想这与内联元素的specifity相关（当我通过#wrapper插入时），但我不知道如何在仍然处理Javascript事件之后hover事件已被触发。

这是我目前的代码：

onclick

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> div具有默认onclick时，我如何处理hover事件以不覆盖#wrapper事件（第二次background-color在onclick）？

注意：我只想使用Javascript。

提前致谢！

Answer 1

将其更改为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>

Answer 2

您没有声明wrapper是什么，请尝试使用：

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

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

2 个答案: