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
– connexo, Commented Dec 16, 2021 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
– connexo, Commented Dec 16, 2021 at 17:12

connexo · Accepted Answer · 2021-12-16 18:23:28Z

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>

Collectives™ on Stack Overflow

CSS hover no longer working when changing CSS properties through JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related