jQuery: Changing the hover color with a color picker

Question

I would like to change the hover color with a color picker.

This is what I have tried:

// First Try

$("input[type=color]").change(function(e) {
  var pickedColor = e.target.value;
  // $("body").css("background-color", pickedColor);
  $("div:hover").css("color", pickedColor);
});


// Second Try

$("input[type=color]").change(function(e) {
  var pickedColor = e.target.value;
  // $("body").css("background-color", pickedColor);
  $(".hover").css("color", pickedColor);
});

$("div").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

body {
  display: flex;
  font-size: 30px;
  font-family: Arial;
  cursor: default;
}

div {
  color: red;
  padding: 10px;
}

div:hover {
  color: orange;
}

.hover {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Hello</div>

<input type="color">

Unfortunately, both does not work. The color picker makes it a bit complex, I guess. Could somebody help me please?

Would be very thankful!

freedomn-m · Answer 1 · 2020-08-17T12:32:38.177

In the 2nd (using jquery hover()), you're adding .hover class to the div, which is working fine, but the css div:hover is take precedence so showing in orange

The (updated) issue with the colour being dynamic (from a colour picker) means you can't use css classes. (You can, but it's a bit hacky where you add a <style> element: https://stackoverflow.com/a/21051833/2181514, but not really usable if it can change multiple times).

You also can't style :pseudo (like :hover) elements directly.

Leaving the option to use .hover().

// Setup the colour
$("input[type=color]").change(function(e) {
  var pickedColor = e.target.value;
  $("div.hoverme").data("hovercolour", pickedColor);
});

// Set the colour on hover/unhover

$("div").hover(function() {
  var pickedColor = $(this).data("hovercolour");
  $(this).css("color", pickedColor);
}, function() {
  var normalColor = $(this).data("normalcolour")
  $(this).css("color", normalColor);
});

body {
  font-size: 30px;
}

div {
  color: red;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hoverme" data-hovercolour="orange" data-normalcolour="red">Hello</div>

<input type="color">

Here, rather than use a global variable for the colours, I've stored the two colours in data- attributes along with the default orange - which jquery can read when it's time to hover

Hey, I'm so sorry, I had to update the question because I'm working with a color picker. And your solution doesn't work in this case. Would be very cool if you could take a look at it again! :) — Jakob, Aug 17 '20 at 11:59

score -1 · Answer 2 · answered Mar 07 '23 at 07:25

setup git repo
Create a webpage with a 24x24 grid of square divs
Set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid like a pen would. the color trail should get darker so after 10 + pass color will get darker/black .
Add a button to the top of the screen that will send the user a popup asking for the number of squares per side for the new grid.
add the color picker so user can select which color he wants draw
add the button which will tricker eraser so on hover of div it will remove the color

jQuery: Changing the hover color with a color picker

2 Answers2