Question

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

<!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为p标签最终确定它，然后在另一个颜色悬停后，颜色变化不会发生。当应该发生时，颜色会在点击时永久变化。

Answer 1

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

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

#col2:hover ~ p {
    color: #ff0 !important;
}

Answer 2

如果使用JQuery不是问题，我认为你想要的是：Live Example

HTML code snippet

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

希望它有所帮助！

使用javascript后css悬停事件无法正常工作？

2 个答案: