javascript 如何阻止js文件中的object.style.backgroundColor删除css文件中的class：hover效果？

7gyucuyw 于 2022-12-21 发布在 Java

关注(0)|答案(2)|浏览(116)

我试图给予我的用户能够将鼠标悬停在一个选项上以高亮显示它，或者按下数字键以高亮显示相应的选项。问题是当object.style.backgroundColor运行时，它似乎覆盖了我在css文件中的悬停效果。换句话说，如果我按下任何键，我就不再有悬停效果了。对此有什么解决方案？

<!-- 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';
    }
}

我尝试过使用addEventListener（“mouseenter”，function（）{code}）高亮显示和使用addEventListener（“mouseleave”，function（）{code}）取消高亮显示，但如果可能的话，我更愿意将所有或大部分样式保留在CSS文件中。

JavaScript

来源：https://stackoverflow.com/questions/74864484/how-do-i-stop-object-style-backgroundcolor-in-my-js-file-from-removing-my-class

2条答案

按热度按时间

qlvxas9a1#

这是因为内嵌样式的特殊性比导入样式更强。如果你只是想改变你的CSS代码来让它工作，只需在hover块中添加一个important。

.hvr:hover {
    background-color: blue !important;
}

赞(0）回复(0）举报 2022-12-21

wn9m85ua2#

我去掉了css中的悬停效果，添加了"onmouseover ="高亮显示（'optionNumber '）; "添加到我的HTML元素中。我在javaScript文件中添加了mouseover函数，现在它按照我想要的方式工作。虽然我承认我很失望，但我不能在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>

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 如何阻止js文件中的object.style.backgroundColor删除css文件中的class：hover效果？

2条答案

相关问题

热门标签

最新问答