css悬停事件在使用javascript后不能工作？
css悬停事件在使用javascript后不能工作？
提问于 2012-12-28 15:17:21
<!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时，文本的颜色应永久更改。
的问题是，一旦我点击1个颜色div来完成它的p标签，然后其他的颜色悬停之后，颜色变化不会发生。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-28 15:32:02
当您使用pElements[i].style.color = "#f00";设置p elements样式时，您设置的是比鼠标悬停所应用的样式更具体的样式。在CSS中，最具体的样式get应用于元素。您定义的CSS hover类将永远不会被应用，因为它不够具体，无法覆盖javascript代码应用的内联样式。
你可以修改你的CSS类来使用!important标签，这应该允许你应用悬停样式，即使它不像内联样式那样具体。
#col2:hover ~ p {
color: #ff0 !important;
}Stack Overflow用户
发布于 2012-12-28 15:39:09
如果使用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>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");
});希望它能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14071652
复制
相似问题
仅允许CSS悬停事件在使用JavaScript超时后
CSS a:悬停不能正常工作
css :在jQuery css更改后，悬停无法工作。
为什么悬停不能工作.CSS RGBA不能工作
CSS位置在悬停时不能正常工作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
