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

Issue

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>

Solution

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>

Answered By - Some guy