当鼠标在元素之间移动时，有没有办法使“：active”选择器的样式应用于当前悬停的元素

Question

当您单击 'cButton' 元素之一时，活动样式将应用于它，但如果您按住鼠标按钮然后将鼠标悬停在另一个 cButton 上，同时按住鼠标按钮，则不会应用活动样式应用于它。我知道在 Javascript 中执行此操作的方法，但我正在尝试使用纯 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>

Answer 1

恐怕纯css是不可能的。因为您需要鼠标悬停，据我所知，css 中没有。

Answer 2

不幸的是，您无法在纯 CSS 中执行此操作。但是，这里有一些 JavaScript 有效的代码：

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>

当鼠标在元素之间移动时，有没有办法使“：active”选择器的样式应用于当前悬停的元素

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

html

css

css-selectors