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

我试图创建一个名为的#wrapper，它有一个hover事件，其中它改变了它的background-color属性。如何在onclick事件后保持悬停效果？

这里面wrapper我有了opacity: 0一些文本，当我点击container，该文本将显示（opacity: 1）。

我希望当点击#wrapper div时，它将保持与它在悬停时的颜色相同。如果再次点击，文字将消失，并且#wrapper的默认颜色将再次出现（来自其父项），hover效果应该再次起作用。

问题在这里，因为如果我点击#wrapper悬停效果不再来。

我想这是一些相关的约specifity的内联元素（当我通过Javascript插入），但我没有关于如何onclick事件被触发后仍处理hover事件的任何想法。

这里是我得到的时刻代码：

window.onload = function(){ 
 
\t var container = document.getElementById('container'); 
 
    var text = document.getElementById('text'); 
 
    
 
    container.onclick = function(){ 
 
     if(text.style.opacity == 0){ 
 
     \t text.style.opacity = 1; 
 
     wrapper.style.backgroundColor = "red"; 
 
     } 
 
     else{ 
 
     \t 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>

我如何处理onclick事件不会覆盖hover事件时#wrapper div有默认background-color（中第二次你onclick在#wrapper）？

注意：我只想使用Javascript。

在此先感谢！

来源

2016-05-16 Francisco Romero

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

来源

2016-05-16 16:05:22 LGSon

非常感谢您！我现在注意到，我没有在任何元素上引用'wrapper'，因为@ soloughlin3在他的答案中指出了我。我真的是新的Javascript，所以它为什么正确执行？ –

@ Error404：您应该添加一个引用，并用它更新我的答案，尽管它显示大多数浏览器将文档中的每个id添加到其全局范围，[chech this post]（http://stackoverflow.com/a/6853267/ 2827823），因此它工作。 – LGSon

是的，在我的真实项目中，我拥有它。在这里重写时只是一个错误，但现在我对它如何工作感到困惑。我也猜测它会将每个ID与一个名称相同的变量相匹配，但找不到任何相关信息。现在我很安全。感谢您的链接和答案！ :) –

你不声明一下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 = ""; 
     } 
    }; 
}

来源

2016-05-16 16:06:09 Steveo

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

回答

相关问题