JavaScript和CSS悬停问题

更改段落元素的颜色时，CSS悬停停止工作。JavaScript和CSS悬停问题

我做了一个演示，讲解：https://jsfiddle.net/woan6b64/

我改变<p>'s颜色后，悬停选择器停止工作。

我的问题是：

我怎样才能改变使用JavaScript悬停效果？
如何在颜色变化后悬停工作？

的jsfiddle代码：

var shift = 0; 
 

 
function change() { 
 
    if (shift === 0) { 
 
    document.getElementById("box").style.backgroundColor = "black"; 
 
    document.getElementById("text").style.color = "white"; 
 
    document.getElementById("text").innerHTML = 'Good! Now click the box again.'; 
 
    shift = 1; 
 
    } else { 
 
    document.getElementById("box").style.backgroundColor = "white"; 
 
    document.getElementById("text").style.color = "black"; 
 
    document.getElementById("text").innerHTML = 'Hover effect is now broken :('; 
 
    } 
 
}

#box { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: white; 
 
} 
 

 
p:hover { 
 
    color: green; 
 
}

<div id='box' onclick='change()'> 
 
    <p id='text'> 
 
    Click me for this box to change color. (Notice how I turn green when hovered) 
 
    </p> 
 
</div>

来源

2017-09-27 captincrunch

是的，这是一个选项@Syden – captincrunch

-1

设置颜色后，将悬停被覆盖。使用重要的给力了！

p:hover{ 
    color: green !important; 
}

来源

2017-09-27 00:59:22 David

这是不对的！不要使用重要的，如果不是严格必要的，这是不好的做法... – Akxe

虽然这是解决方案，[！重要应该作为最后的手段]（https://memegenerator.net/img/instances/500x/76500203 /important-does-not-fix-your-bad-css.jpg）。你应该利用[**更高的特异性**]（https://css-tricks.com/specifics-on-css-specificity/）代替:) –

这是具有特异性的问题，所以你需要使用!important上的color属性，迫使它。

fiddle

注：这是不是最好的做法。根据您的意图，添加课程或简单地取消设置颜色可能是最佳选择。

来源

2017-09-27 00:59:57 jhpratt

阻止它！如果不需要，请勿使用!important ...您的问题是您将颜色设置为黑色。

document.getElementById("text").style.color = "";

这将使颜色继承正确的风格。

如何，这也不是正确的解决方案。您应该添加类的框，然后执行：

#box { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: white; 
 
} 
 

 
p:hover { 
 
    color: green; 
 
} 
 

 
#box.altered { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
.altered p:hover { 
 
    color: red; 
 
}

<div id="box" onclick="this.classList.toggle('altered')"> 
 
    <p id='text'> 
 
    Click me for this box to change color. (Notice how I turn green when hovered) 
 
    </p> 
 
</div>

来源

2017-09-27 01:02:45 Akxe

当然，但这也取决于他们是否希望在悬停后保持绿色第一次点击。原来的问题没有说明。 – jhpratt

确实，仍然增加班级是更好的选择，并且增加重要的绿色将使其仅与绿色工作...所以 – Akxe

是的，一个班级绝对是最好的选择！真的，一切都取决于原来的目标。 – jhpratt

如果你想和你需要监听onmouseover事件和onmouseout事件，检查我所做的代码纯JS做

var textElement = document.getElementById("text"); 
 
var defaultColor = textElement.style.color; 
 

 
textElement.onmouseover = function(event) { 
 
var currentElement = event.target; 
 
currentElement.style.color = "red"; 
 
} 
 

 
textElement.onmouseout = function(event) { 
 
var currentElement = event.target; 
 
currentElement.style.color = defaultColor; 
 
}

<div id="parent"> 
 
<p id="text"> 
 
I am a text that change its text color :D 
 
</p> 
 
</div>

来源

2017-09-27 01:05:40

添加新类

// document.getElementById("box").style.backgroundColor = "black"; 
// document.getElementById("text").style.color = "white"; 
document.getElementById("text").classList.add("purple"); 

.purple { 
    color: purple; 
}

来源

2017-09-27 01:05:44 Alex

你这样做的方式会奏效，但这种方式更清洁，并防止再次添加它。 – jhpratt

JavaScript和CSS悬停问题

回答

相关问题