英文:
Javascript DOM style disables css hover effect
问题
我是JavaScript初学者，创建了一个简单的项目来理解DOM样式，但遇到了问题。有一个带有红色背景颜色和蓝色悬停效果的p标签。我在p上放置了一个onclick事件，当用户点击p时，其背景颜色会变为橙色。问题是，当通过onclick事件更改背景颜色时，悬停效果将变得无效。这是JavaScript的常规行为吗？
<!DOCTYPE html>
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>
我在Stackoverflow上搜索了，但不幸的是，类似的问题1和2没有帮助。
英文:
I'm a beginner in javascript and I create a simple project to understand DOM
style but faced with a problem. there is a p tag with a red background color and blue
color hover effect. I put an onclick event on the p that when user clicks on the p,
its background color changes to orange. the problem is when the background color
changes with onclick event, the hover effect will be useless then.
so is there any problem or this is the routine behavior of javascript?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>
<!-- end snippet -->
I searched in Stackoverflow but unfortunately, these similar questions
1
and 2
didn't help.
答案1
得分: 2
建议将具有相同优先级的类定义为避免使用 !important;（可能会引发其他问题）
<html>
<head>
<style>
#p2.red {
background-color: red;
}
#p2.orange {
background-color: orange;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" class="red" onclick="test(this)"> text </p>
<script>
function test(element) {
element.classList.toggle("orange");
}
</script>
</body>
</html>
英文:
My recommendation is to define the classes with the same priority to prevent using !important; (that could generate other problems)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
#p2.red {
background-color: red;
}
#p2.orange {
background-color: orange;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" class="red" onclick="test(this)"> text </p>
<script>
function test(element) {
element.classList.toggle("orange");
}
</script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 2
这里的问题是由于内联样式具有最高的特异性。有许多解决方案，但通常使用!important来解决它是一种不好的方法，因为随着项目变得越来越大和其他各种原因，它变得难以处理。
作为初学者，现在是养成良好习惯的时候。所以对于我的答案，我删除了你的内联onclick和内联样式更改。
我使用了一个事件监听器和querySelector来定位你的段落。
然后，我向该元素添加了一个类（你也可以使用toggle来在单击时添加/移除）。
对于CSS，我通过#p2.orange来定位元素（orange是我的类名）。并且我将它放在CSS中hover的上面。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const p = document.querySelector("#p2");
p.addEventListener("click",() => {
p.classList.add("orange");
});
<!-- language: lang-css -->
#p2 {
background-color: red;
}
#p2.orange{
background-color:orange;
}
#p2:hover {
background-color: blue;
}
<!-- language: lang-html -->
<p id="p2"> text </p>
<!-- end snippet -->
英文:
The problem here is due to inline styles having the highest specificity. There are many solutions for this, using !important is generally a bad method of solving it as its difficult to work with the bigger the project gets and various other reasons.
As a beginner now is the time to get into good habits. So for my answer, I got rid of both your inline onclick and your inline style change.
I'm using an event listener and querySelector to target your paragraph.
Then I'm adding a class to that element (you can use toggle to add/remove on click too).
For the CSS, I target the element via #p2.orange (orange is my class name). And I place it ABOVE the hover in the CSS itself.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const p = document.querySelector("#p2");
p.addEventListener("click",() => {
p.classList.add("orange");
});
<!-- language: lang-css -->
#p2 {
background-color: red;
}
#p2.orange{
background-color:orange;
}
#p2:hover {
background-color: blue;
}
<!-- language: lang-html -->
<p id="p2"> text </p>
<!-- end snippet -->
答案3
得分: 1
这是 JavaScript 的常规行为。
当你使用 JavaScript 改变元素的背景颜色，如：document.getElementById("p2").style.backgroundColor = "orange" 时，它会直接修改该元素的内联样式，这将优先于在 CSS 中定义的任何样式，包括悬停效果。
这里是 CSS 的具体性层级列表。
英文:
This is routine behavior of JavaScript.
When you change the background color of an element using JavaScript like: document.getElementById("p2").style.backgroundColor = "orange"
it directly modifies the inline style of that element which takes precedence over any styles defined in the CSS, including the hover effect.
Here's a list if CSS Specificity Hierarchy.
答案4
得分: 1
因为内联样式具有更高的特异性，它会覆盖您的CSS属性。您可以通过在悬停样式中添加!important来抵消这一点：
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue !important;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>
英文:
Because inline styles have higher specificity, it will override your css properties. You can counteract this by adding !important to your hover style:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue !important;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>
<!-- end snippet -->
答案5
得分: 1
你可以使用CSS变量来改变:hover状态下的颜色。
:root { --clr: #0000ff; } 设置了初始颜色。
background-color: var(--clr); 将变量分配给了background-color样式。
document.querySelector(':root').style.setProperty('--clr', 'orange'); 然后通过JavaScript更改了这个变量。
英文:
You can use CSS variables to change the :hover colour.
:root{--clr:#0000ff;}
sets the initial colour,
background-color: var(--clr);
assigns the variable to the background-color style.
document.querySelector(':root').style.setProperty('--clr','orange');
then changes the variable from JavaScript.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<html>
<head>
<style>
:root{
--clr:#0000ff;
}
#p2 {
background-color: red;
}
#p2:hover {
background-color: var(--clr);
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.querySelector(':root').style.setProperty('--clr','orange');
}
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论