1

I've been working on a web project that requires me to change the cursor to a custom image when hovering over an object. This is the code I have used:

.add-to-wishlist:hover {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}

I now want to be able to extend that to detect the state of the object and show a different image depending on that state.

The key example is when hovering over a video player, show one image if the video is playing and show another image if it is not. These would be an image that says 'pause' or 'play' respectively.

I am just not sure how to do this, with pure CSS or including JavaScript. How do I detect if a video is playing and change the hover cursor image accordingly?

Thank you!

James
  • 669
  • 1
  • 10
  • 21
  • 1
    What kind of video? Maybe player adds some class, so you can do `.add-to-whishlist.playing:hover` and `.add-to-whishlist:hover` – Justinas Jul 25 '23 at 11:42
  • They'd likely be embeds from YouTube or Vimeo, or something similar mate. – James Jul 27 '23 at 07:37

2 Answers2

4

Using video element events "play" and "pause" you can add toggle a class .playing to the element, and the rest is simple css, as seen in comments.

video.addEventListener("play", function(ev) {
  ev.target.classList.add("playing");
})


video.addEventListener("pause", function(ev) {
  ev.target.classList.remove("playing");
})
#video {
  border: 5px solid green;
}

#video:hover {
  border: 5px solid blue;
}

#video.playing {
  border: 5px solid red;
}

#video.playing:hover {
  border: 5px solid yellow;
}
<h2>play/pause/hover</h2>

<video id="video" controls width="250">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
</video>

This approach hasn't been tested with all cases (maybe error doesn't fire pause etc). But you can take this idea to other methods of detecting video play. according to chatGPT you can:

const videoElement = document.getElementById('myVideo');

function isVideoPlaying() {
  return !videoElement.paused;
}

// Example usage:
if (isVideoPlaying()) {
  console.log('Video is playing!');
} else {
  console.log('Video is paused or not yet started.');
}
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • That's a really good idea actually, thank you! At the moment I just have screenshot placeholders for the videos but when I have the actual videos, I will give it a go and let you know! – James Jul 27 '23 at 07:37
1

You can do this with javascript.

I don't know if you can do it with CSS alone.

Look at eventhandlers for entereing the video here:

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

And here is a link to some easy to implement code to detect the playingstate of a video

Detect if video is playing

Write some javascript that executes on mouseenter and mouseleave.

Erwin Moller
  • 2,375
  • 14
  • 22
  • Thanks for the tips! I just have screenshot placeholders of the videos at the moment but when I have the final videos, I will give it a go and see. – James Jul 27 '23 at 07:38