CSS on Mouse Down

What is the mouse down selector in CSS?

I think you mean the active state

 button:active{
  //some styling
 }

These are all the possible pseudo states a link can have in CSS:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

See also: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

CSS on Mouse Down

Here is how to do a pure css toggle 'button' (CSS3 required):

.toggle-button{  background-color: #FF0000;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;}
.toggle-box:checked + .toggle-button{  background-color: #00FF00;}

<input type="checkbox" class="toggle-box" id="toggle-1" /><label for="toggle-1" class="toggle-button">Click Me</label>

Highlight a div on mouse down using CSS

I'm not sure how widely supported it is, but this seems to work (in chrome FF and Safari) at least

http://jsfiddle.net/sQU2V/

  <style>div:active{background:red}</style>
  <div>test</div>

Apply styling when user holds mouse click down?

The solution turned out to be hard to find, but straightforward:

.AddButton:hover:active {
  outline: 0;
}

Javascript/css/html - prevent mousedown from disabling hover

There isn't really a pure CSS way to solve this, simply because that's how it works. Not much way to override that stuff with CSS.

What you'll have to do instead is manually implement your own hover functionality by using mouseenter and/or mouseover and mouseout and/or mouseleave.

Something like this:

const myElement = document.querySelector('#myElement');
myElement.addEventListener('mouseenter', ({ target }) => target.classList.add('hovering'));myElement.addEventListener('mouseleave', ({ target }) => target.classList.remove('hovering'));

div {  width: 100px;  height: 100px;  border: 1px solid #000;  background: #F00;}
div.hovering {  background: #0F0;}

<div id="myElement"></div>

Have elements follow cursor while mousedown is active

Your code is almost there, there's just two issues which need addressing.

Firstly, you need to know when the mouse is being held down and moving. The nested events are not the best way to do this and are actually causing issues. Similarly, binding/unbinding events at runtime becomes hard to maintain and leads to other issues.

The simplest way to do what you need to is to use a boolean variable to indicate if the mouse button is being held down. It gets set on mousedown, mouseup and other relevant events. You can then use this in the parallax() function to check if processing should continue.

The second issue is that because the img elements are rendered on top of everything else, and fill the full .container element, they intercept the mouse click/drag events. To stop this apply pointer-events: none to them in CSS.

With those corrections in place, the code works:

function parallax(e) {
  document.querySelectorAll(".object").forEach(function(move) {
    var moving_value = move.dataset.value;
    var x = (e.clientX * moving_value) / 250;
    var y = (e.clientY * moving_value) / 250;
    move.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
}

let mousedown = false;

$('body').on({
  mousedown: () => mousedown = true,
  mouseup: () => mousedown = false,
  mouseleave: () => mousedown = false,
  mousemove: e => mousedown && parallax(e)
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: #666 url(bg.png) no-repeat;
  background-size: cover;
  height: 100vh;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.container img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  pointer-events: none;
}

.container h2 {
  z-index: 1;
  position: relative;
  color: #fff;
  font-size: 90px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 32px;
  line-height: 60px;
}

.container h2 span {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 10px;
}

@media (max-width:800px) {
  .container h2 {
    font-size: 60px;
    letter-spacing: 19px;
    line-height: 35px;
  }
  .container h2 span {
    font-size: 26px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <h2 class="object" data-value="3">Space<br><span>Background</span></h2>
  <img src="https://i.imgur.com/5yrwyPE.png" class="object" data-value="-2" alt="Sample Image">
  <img src="https://i.imgur.com/C688O6f.png" class="object" data-value="6" alt="Sample Image">
  <img src="https://i.imgur.com/zQMI9zR.png" class="object" data-value="4" alt="Sample Image">
  <img src="https://i.imgur.com/JSzKUzo.png" class="object" data-value="-6" alt="Sample Image">
  <img src="https://i.imgur.com/dxgHvQV.png" class="object" data-value="8" alt="Sample Image">
  <img src="https://i.imgur.com/kbNROja.png" class="object" data-value="-4" alt="Sample Image">
  <img src="https://i.imgur.com/2Ud0NwP.png" class="object" data-value="5" alt="Sample Image">
  <img src="https://i.imgur.com/c5BGOj2.png" class="object" data-value="-9" alt="Sample Image">
  <img src="https://i.imgur.com/Qxs8luV.png" class="object" data-value="-5" alt="Sample Image">
</div>

---

Related Topics