CSS hover no longer working when changing CSS properties through JS

Question

I have this piece of code:

function dropdown() {
  let dropdownText = document.querySelector(".dropdown-button");
  let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];

  var aux = dropdownText.innerHTML;
  dropdownText.innerHTML = item.innerHTML;
  item.innerHTML = aux;
  
  document.querySelector(".dropdown-items").style.display = "none";
}

.btn {
  width: 150px;
  height: 30px;

  border-radius: 5px;
  border: none;
  box-shadow: 0 3px 1px 0 black;

  text-align: center;
  line-height: 30px;

  color: black;

  font-family: Consolas, monaco, monospace;
}

.dropdown {
  margin: 0 50px 0 50px;
  position: relative;
}

.dropdown-items {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-button {
  background: red;
}

.dropdown:hover .dropdown-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropdown-button {
  background: orange;
  font-size: 15px;
  color: white;
}

.dropdown-button:hover {
  cursor: pointer;
}

.dropdown-items div {
  margin-top: 5px;

  transform: scaleX(90%);
  height: 20px;
  line-height: 20px;
  background: lightgray;
  padding: 5px 0 5px 0;
  text-align: center;
}

.dropdown-items div:hover {
  cursor: pointer;
  background: gray;
}

<div class="dropdown">
    <button class="btn dropdown-button" type="button">Terminate</button>
    <div class="dropdown-items">
        <div class="btn" onclick="dropdown();">Interrupt</div>
    </div>
</div>

As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?

You should neither be using inline styles, nor inline event listeners. Check my answer for a properly coded solution that also works for any number of `.dropdown` elements. — connexo, Dec 16 '21 at 17:06
Really, I mean **really**, don't stick to your approach and fix its shortcomings with an even worse "solution". Instead learn how to properly work with event listeners and how to make use of toggling CSS classes via JS. — connexo, Dec 16 '21 at 17:12

connexo · Accepted Answer · 2021-12-16T18:23:28.193

Inline styles override any stylesheet styles, as they have maximum CSS specificity.

Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.

// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');

// iterate over the list
for (const dropdown of dropdowns) {
  // for each dropdown, add a mouseenter and mouseleave listener
  dropdown.addEventListener('mouseenter', function(event) {
    dropdown.classList.add('open');
  });
  
  dropdown.addEventListener('mouseleave', function(event) {
    dropdown.classList.remove('open');
  });
  
  // Now add a click listener to each <div class="dropdown-items">
  // that transfers the text and closes the dropdown
  dropdown.querySelector('.dropdown-items').addEventListener(
    'click',
    function(event) {
      this.previousElementSibling.textContent = this.textContent;
      dropdown.classList.remove('open');
    }
  );
}

.btn {
  width: 150px;
  height: 30px;

  border-radius: 5px;
  border: none;
  box-shadow: 0 3px 1px 0 black;

  text-align: center;
  line-height: 30px;

  color: black;

  font-family: Consolas, monaco, monospace;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-items {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-button {
  background: red;
}

.dropdown.open .dropdown-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropdown-button {
  background: orange;
  font-size: 15px;
  color: white;
}

.dropdown-button:hover {
  cursor: pointer;
}

.dropdown-items div {
  margin-top: 5px;

  transform: scaleX(90%);
  height: 20px;
  line-height: 20px;
  background: lightgray;
  padding: 5px 0 5px 0;
  text-align: center;
}

.dropdown-items div:hover {
  cursor: pointer;
  background: gray;
}

<div class="dropdown">
    <button class="btn dropdown-button" type="button">Terminate</button>
    <div class="dropdown-items">
        <div class="btn">Interrupt</div>
    </div>
</div>
<div class="dropdown">
    <button class="btn dropdown-button" type="button">Terminate</button>
    <div class="dropdown-items">
        <div class="btn">Whatever</div>
    </div>
</div>
<div class="dropdown">
    <button class="btn dropdown-button" type="button">Terminate</button>
    <div class="dropdown-items">
        <div class="btn">Another one</div>
    </div>
</div>
<div class="dropdown">
    <button class="btn dropdown-button" type="button">Terminate</button>
    <div class="dropdown-items">
        <div class="btn">Here we go</div>
    </div>
</div>

CSS hover no longer working when changing CSS properties through JS

1 Answers1