为jQuery mouseover事件添加切换功能，实现鼠标移出恢复文本颜色

我有一段脚本，当鼠标悬停在#eventID元素上时，#targetID元素的文本颜色会变为紫色，功能正常。现在想添加切换逻辑，触发mouseout事件时让文本颜色恢复原始或指定颜色。

我尝试在css函数前和jQuery事件监听器前添加toggle，但两种方式都无效：

测试1代码：

$("#eventID").on ("mouseover mouseout",function(){
  $("#targetID").toggle(css("color","purple"));})

测试2代码：

$("#eventID").toggle(on("mouseover mouseout", function() {
  $("#targetID").css("color", "purple");}));

可行的解决方法 #

方法1：判断事件类型设置颜色 #

在事件处理函数里区分当前触发的是mouseover还是mouseout，分别设置对应颜色：

如果是硬编码指定恢复颜色（比如黑色）：

$("#eventID").on("mouseover mouseout", function(event) {
  $("#targetID").css("color", event.type === "mouseover" ? "purple" : "#000");
});

如果要保留元素的原始颜色（不硬编码），可以先提前获取并存储：

// 提前获取目标元素的初始颜色
const originalColor = $("#targetID").css("color");

$("#eventID").on("mouseover mouseout", function(event) {
  $("#targetID").css("color", event.type === "mouseover" ? "purple" : originalColor);
});

方法2：用CSS类切换（更推荐） #

把样式逻辑剥离到CSS中，通过添加/移除类实现切换，这种方式脚本和样式分离，更易维护：

首先定义CSS类：

.target-purple {
  color: purple;
}

然后编写jQuery脚本：

$("#eventID").on("mouseover mouseout", function() {
  $("#targetID").toggleClass("target-purple");
});

或者用jQuery专门的hover方法，逻辑更清晰：

$("#eventID").hover(
  // 鼠标悬停时添加类
  function() { $("#targetID").addClass("target-purple"); },
  // 鼠标移出时移除类
  function() { $("#targetID").removeClass("target-purple"); }
);

之前的错误原因 #

• 测试1的toggle(css("color","purple"))用法错误：jQuery的toggle()是用来控制元素显示/隐藏的，不能直接传入css()调用，css()会直接设置样式，无法配合toggle实现切换。
• 测试2的toggle(on(...))完全不符合jQuery API规范，toggle()没有这种绑定事件的用法。

内容的提问来源于stack exchange，提问作者lu lu