'is there a way to make the ":active" selector's style apply to the currently hovered element when the mouse is moving between elements

when you click on one of the 'cButton' elements, the active style will be applied to it but if you hold the mouse button down and then hover over another cButton while still holding, the style will not be applied to it. I know a way to do it in Javascript but i am trying to do it using pure css.

body{

  display: flex;
  justify-content: space-evenly;

}

.cButton{
  
  width: 100px;
  aspect-ratio: 1;
  background: red;
  
}

.cButton:active{

  background: blue;

}
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
htmlcsscss-selectors


Solution 1:[1]

Unfortunately, you can't do this in pure CSS. However, here is some JavaScript code that works:

window.onload = function() {
  document.querySelectorAll(".cButton").forEach(function(ele) {
    ele.onmousedown = function() {
      ele.classList.add("down")
    }
    ele.onmouseover = function(e) {
      if (e.buttons == 1 && e.button == 0) {
        ele.classList.add("down");
      }
    }
    ele.onmouseup = function() {
      ele.classList.remove("down")
    }
    ele.onmouseout = function() {
      ele.classList.remove("down")
    }
  });
}
body {
  display: flex;
  justify-content: space-evenly;
}

.cButton {
  width: 100px;
  aspect-ratio: 1;
  background: red;
}

.cButton.down {
  background: blue;
}
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>

Solution 2:[2]

I am afraid that that is impossible in pure css. Because you will need a mouse down hover which is not available in css to my knowledge.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Some guy
Solution 2 Spekbillen

Related Questions