当鼠标在元素之间移动时，有没有办法使":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>