如何阻止我的 js 文件中的 object.style.backgroundColor 删除我的类：我的 css 文件中的悬停效果？
[英]How do I stop object.style.backgroundColor in my js file from removing my class:hover effect in my css file?
问题描述
I'm trying to give my users the ability to hover over an option to highlight it, or to press a number key to highlight the corresponding option.
我试图让我的用户能够将鼠标悬停在一个选项上以突出显示它，或者按数字键突出显示相应的选项。 The problem is that when the object.style.backgroundColor runs it seems to override my hover effect in my css file.问题是，当 object.style.backgroundColor 运行时，它似乎覆盖了我在 css 文件中的悬停效果。 In other words, if I press any key I no longer have a hover effect.换句话说，如果我按任意键，我将不再有悬停效果。 What is the solution to this?解决这个问题的方法是什么？
<!-- my HTML -->
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<p id='option1'>option 1</p>
<p id='option2'>option 2</p>
<p id='option3'>option 3</p>
<script src="test.js"></script>
</body>
/* my CSS */
p {
background-color: red;
}
p:hover {
background-color: blue;
}
/* my javascript */
// highlights option based on keyup
document.addEventListener("keyup", function(event) {
unhighlightOption(); // to unhighlight any already highlighted elements
switch (event.which) {
case 49: // 1
case 97: // numpad 1
document.getElementById('option1').style.backgroundColor = 'blue';
break;
case 50: // 2
case 98: // numpad 2
document.getElementById('option2').style.backgroundColor = 'blue';
break;
case 51: // 3
case 99: // numpad 3
document.getElementById('option3').style.backgroundColor = 'blue';
break;
default:
console.log('not a valid key');
}
});
// loop to unhighlight all options
function unhighlightOption() {
for (let i=1; i<4; i++) {
document.getElementById('option' + i).style.backgroundColor = 'red';
}
}
I've tried using an addEventListener("mouseenter", function() {code}) to highlight and a addEventListener("mouseleave", function() {code}) to unhighlight, but I'd much rather keep all or most of my styles in my CSS file if at all possible.我试过使用 addEventListener("mouseenter", function() {code}) 来突出显示并使用 addEventListener("mouseleave", function() {code}) 来取消突出显示，但我宁愿保留全部或大部分如果可能的话，我的 CSS 文件中的样式。
2 个解决方案
解决方案1
1 2022-12-20 14:32:09
This is because the specificity of inline styles is more than imported styles.这是因为内联样式的特殊性要高于导入样式。 If you just want to change your CSS code to get this working just add an important in the hover block.如果你只是想改变你的 CSS 代码来让它工作，只需在悬停块中添加一个important的。
.hvr:hover {
background-color: blue !important;
}
解决方案2
0 2022-12-20 17:10:39
I removed the hover effect from css and added "onmouseover="highlight('optionNumber');" to my HTML elements. I added the mouseover function in my javaScript file and now it works the way I want it to. Although I'm admittedly disappointed I couldn't keep my styles in CSS. The resulting code looks like this:我从 css 中删除了悬停效果，并在我的 HTML 元素中添加了“onmouseover="highlight('optionNumber');"。我在我的 javaScript 文件中添加了鼠标悬停功能，现在它按照我想要的方式工作。虽然我不可否认，我很失望我不能在 CSS 中保留我的样式。结果代码如下所示：
/* my javascript */ // highlights option based on keyup document.addEventListener("keyup", function(event) { unhighlightOption(); // to unhighlight any already highlighted elements switch (event.which) { case 49: // 1 case 97: // numpad 1 document.getElementById('option1').style.backgroundColor = 'blue'; break; case 50: // 2 case 98: // numpad 2 document.getElementById('option2').style.backgroundColor = 'blue'; break; case 51: // 3 case 99: // numpad 3 document.getElementById('option3').style.backgroundColor = 'blue'; break; default: console.log('not a valid key'); } }); // loop to unhighlight all options function unhighlightOption() { for (let i = 1; i < 4; i++) { document.getElementById('option' + i).style.backgroundColor = 'red'; } } function highlight(optionNumber) { unhighlightOption(); document.getElementById(optionNumber).style.backgroundColor = 'blue'; }
/* my CSS */ p { background-color: red; }
<.-- my HTML --> <head> <link rel="stylesheet" href="test;css" /> </head> <body> <p id='option1' onmouseover="highlight('option1');">option 1</p> <p id='option2' onmouseover="highlight('option2');">option 2</p> <p id='option3' onmouseover="highlight('option3').">option 3</p> <script src="test.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.