Javascript 特定悬停任务

我有一个问题。例如，你有3个跨距（默认颜色为黑色），在跨距上：悬停颜色变为红色，没关系。但是如果我告诉你，在开始时，第一个跨距是橙色的。现在我想悬停橙色的跨距，它必须变为红色，当我取消悬停时，它应该变为黑色，默认情况下。当然，在第二次悬停时，它将与其他跨距一样（悬停时为红色，取消悬停时为黑色）。对不起，如果我没有解释清楚，我的英语suc*s。这就是我所做的。 仅仅用css就可以实现这一点吗

<span class="class1">blabla</span>
<span class="class2">blabla</span>
<span class="class3">blabla</span>

.class1{color:orange}
span:hover{color:red}

blabla
布拉布拉
布拉布拉
.class1{颜色：橙色}
span:hover{color:red}

您可以使用jQuery执行此操作：

$(".class1").mouseleave(function(){
  $(this).removeClass("class1");
})

第二：

var span=document.getElementsByClassName（'rainbow-hover'）；
对于（var i=span.length；i--；）{
设c=[‘绿色’、‘红色’、‘蓝色’、‘橙色’]；
span[i].onmouseover=function（）{
如果（！c.length）c=[‘绿色’、‘红色’、‘蓝色’、‘橙色’]；
this.style.color=c.shift（）；
}
}

将鼠标悬停在我身上
盘旋我
盘旋我
盘旋我
盘旋我盘旋我
将鼠标悬停在我身上

HTML

JavaScript

var firstSpan = document.getElementById("firstspan");

firstSpan.onmouseover = function() {
 firstSpan.style.color = "red";
};

firstSpan.onmouseout = function() {
 firstSpan.style.color = "black";
};

---

JSFiddle:

对不起，我更新了链接，我想您必须使用javascript才能在这里获得所需的内容。当前的css没有你想要的功能。还有一个问题，例如我刚刚加载了页面，现在我正在悬停第二个分区，如何使第一个分区在这一刻变为黑色，我的意思是作为默认值。我的意思是不管我在哪里悬停，第一个分区的默认颜色变为黑色，悬停颜色变为红色。哦，我这样解决了它$(“.class1、.class2、.class3”）.mouseover（function（）{$（.class1”）.removeClass（“class1”）；}）是的，对。一些较短的形式是：$（“[class^='class']”）.mouseover（function（）{$（.class1”）.removeClass（“class1”）；}）主席先生，最后一个问题，例如，我在所有跨度上悬停2-3次，然后我停止悬停，如果所有跨度都没有悬停，我如何将橙色返回到第一个。我的意思是，如果我的鼠标不再悬停在跨度上，我要重新添加类

<span class="class1" id="firstspan">blabla</span>
<span class="class2">blabla</span>
<span class="class3">blabla</span>

.class1{
 color: orange;
}

span:hover{
 color: red;
}

var firstSpan = document.getElementById("firstspan");

firstSpan.onmouseover = function() {
 firstSpan.style.color = "red";
};

firstSpan.onmouseout = function() {
 firstSpan.style.color = "black";
};