css悬停事件在使用javascript后不起作用？_Javascript_Css

css悬停事件在使用javascript后不起作用？

javascript css

css悬停事件在使用javascript后不起作用？,javascript,css,Javascript,Css,下面是我遇到问题的代码- <!DOCTYPE html> <html> <head> <style type="text/css"> p { font-family: Tahoma; line-height: 170%; color: #000; font-size: 15px; padding: 5px 0px 5px 0px; text-align: center; } #col1 { /

下面是我遇到问题的代码-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00;
}

#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0;
}
</style>
</head>
<body>
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

<script type="text/javascript">

var pElements = document.getElementsByTagName("p");

$('#col1').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#f00";
}
});

$('#col2').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#ff0";
}
});

</script>
</body>
</html>


p{
字体系列：Tahoma；
线高：170%；
颜色：#000；
字体大小：15px；
填充：5px0px 5px0px；
文本对齐：居中；
}
#可乐{
//一些财产
}
#col1:hover~p{
颜色：#f00；
}
#可乐{
//一些财产
}
#col2:hover~p{
颜色：#ff0；
}
将鼠标悬停以查看，然后单击以选择此颜色。
将鼠标悬停以查看，然后单击以选择此颜色。
这是一些文本
var pElements=document.getElementsByTagName（“p”）；
$（'#col1'）。单击（函数（）{
对于（变量i=0；i


我真正想要的是，当我悬停一个color div时，p标记中文本的颜色仅在该color div悬停时改变。单击颜色div时，文本的颜色应永久更改
问题是，一旦我点击其中一个颜色div来完成p标记，然后在另一个颜色悬停之后，颜色变化就不会发生。当您使用pElements[i]设置p
elements样式时，颜色会在单击时发生永久性变化。
您正在设置比悬停应用的样式更具体的样式。在CSS中，最具体的样式get应用于元素。您定义的CSS hover类永远不会被应用，因为它不够具体，无法覆盖javascript代码应用的内联样式
您可以修改CSS悬停类以使用！重要信息
标记，这应该允许您应用悬停样式，即使它没有内联样式那么具体
#col2:hover ~ p {
    color: #ff0 !important;
}

如果使用JQuery没有问题，我想这就是您想要的：
HTML代码片段
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}

$("#col1").click(function () {
    $("p").css("color","#f00");
});

$("#col2").click(function () {
    $("p").css("color","#ff0");
});

JS代码片段
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}

$("#col1").click(function () {
    $("p").css("color","#f00");
});

$("#col2").click(function () {
    $("p").css("color","#ff0");
});

希望有帮助
 不要使用内联样式。而是添加/删除一个类，并基于这些类创建所需的CSS样式。我不使用任何内联样式。问题是，一旦在单击div时执行了javascript，那么hover事件就不起作用了。你的JavaScript显式地设置元素样式，这样设置的样式优先于非！重要信息
CSS样式。我不知道JavaScript为元素设置内联CSS。谢谢。添加！对style属性很重要，解决了我完全相同的问题！