How do I stop object.style.backgroundColor in my js file from removing my class:hover effect in my c-CodePudding

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. 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.

CodePudding user response：

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.

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

CodePudding user response：

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:

/* 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' onm ouseover="highlight('option1');">option 1</p>
  <p id='option2' onm ouseover="highlight('option2');">option 2</p>
  <p id='option3' onm ouseover="highlight('option3');">option 3</p>
  <script src="test.js"></script>
</body>