is there a way to make the ":active" selector's style apply to the currently hovered-CodePudding

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 >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>

CodePudding user response：

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.

CodePudding user response：

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 >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>