CODEWITHSUNDEEP
htmlcsscss-selectors
randomness
randomness

Reputation: 15

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

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 class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>

Upvotes: 0

Views: 54

Answers (2)

noname
noname

Reputation: 321

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 class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>
<div class="cButton">
</div>

Upvotes: 1

Handsaw3772
Handsaw3772

Reputation: 68

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.

Upvotes: 2

Related Questions