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()）中，您正在向div中添加.hover类，它工作正常，但是 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属性中将这两种颜色存储在<table style="word-wrap: anywhere; max-width: 1px"> <tr> <th>Name</th> </tr> <tr> <td>Name here</td> </tr> </table>属性中-jQuery在需要悬停时可以读取

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

1 个答案: