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

Question

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;

}

user_16632908 · Answer

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.

user_18896353 · Answer

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;
}

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

2 Answers