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

在这里，我没有为颜色使用全局变量，而是将两种颜色存储在 data- 中。属性以及默认值 orange - 当需要悬停时，哪个 jquery 可以读取