jQuery：使用颜色选择器更改悬停颜色

Question

我想用颜色选择器更改悬停颜色。

这是我尝试过的：

// 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">

不幸的是，两者都不起作用。我猜颜色选择器让它有点复杂。有人可以帮帮我吗？

非常感谢！

Answer 1

在第二个（使用 jquery hover()）中，您将 .hover 类添加到 div，这工作正常，但是 css div:hover 优先，因此显示在橙色

颜色是动态的（来自颜色选择器）的（更新的）问题意味着您不能使用 css 类。 （可以，但添加<style> 元素：https://stackoverflow.com/a/21051833/2181514 有点麻烦，但如果它可以多次更改，则不是真正可用）。

您也不能直接设置:pseudo（如:hover）元素的样式。

留下使用.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">

在这里，我没有为颜色使用全局变量，而是将这两种颜色与默认的 orange 一起存储在 data- 属性中 - jquery 可以在悬停时读取它