5

这是我遇到问题的代码-

<!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>

我真正想要的是，当我悬停颜色 div 时，p 标签中文本的颜色仅在颜色 div 悬停时发生变化。单击颜色 div 时，文本的颜色应永久更改。

问题在于，一旦我单击颜色 div 中的 1 个以将其最终确定为 p 标签，然后将另一种颜色悬停，颜色变化就不会发生。颜色会在点击时永久改变，因为它应该发生。

4

2 回答 2

12

当您设置p元素样式时，pElements[i].style.color = "#f00";您将设置一种更具体的样式，然后是悬停应用的样式。在 CSS 中，最具体的样式被应用到元素上。您定义的 CSS 悬停类将永远不会应用，因为它不够具体，无法覆盖您的 javascript 代码应用的内联样式。

您可以修改您的 CSS 悬停类以使用该!important标签，这应该允许您应用悬停样式，即使它不像内联样式那样具体。

#col2:hover ~ p {
    color: #ff0 !important;
}
于 2012-12-28T15:32:02.233 回答
2

如果使用 JQuery 没有问题，我认为这就是您想要的：Live Example

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>

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 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}​

JS代码片段

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

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

希望能帮助到你！

于 2012-12-28T15:39:09.210 回答