在第二个示例中（使用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可以在悬停时读取该属性

• 设置git存储库
• 创建包含24 x24网格的方形div的网页
• 设置一个“悬停”效果，这样当鼠标经过栅格div时，栅格div会改变颜色，像钢笔一样在栅格中留下一条（像素化的）痕迹。颜色痕迹应该变暗，这样经过10次以上的传递后，颜色会变暗/黑色。
• 在屏幕顶部添加一个按钮，该按钮将向用户发送一个弹出窗口，询问新网格每边的正方形数量。
• 添加颜色选择器，以便用户可以选择他想要绘制的颜色
• 添加按钮，这将tricker橡皮擦，使悬停的div，它将删除颜色