当您单击其中一个“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>回答1
恐怕这在纯 css 中是不可能的。因为据我所知，您需要鼠标悬停在 css 中。
回答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>