一次悬停多个元素，向后兼容

Question

我想设置一个乱七八糟的导航菜单。单词是分开的，但是当你将鼠标悬停在一个单词上时，对应的单词都会变成不同的颜色，从而揭示了疯狂的方法。我能够使用 html/css 在一个方向上实现这一点，但是 css 是“级联的”，我无法让它反向工作。这是我正在寻找的示例：

示例链接是 -

红场
蓝圈
绿三角

我希望菜单看起来像这样 -

红蓝方块绿圆三角形

将鼠标悬停在“红色”或“方形”上会将这两个链接更改为不同的颜色 将鼠标悬停在“蓝色”或“圆圈”上会改变它们，等等......

所以我的菜单 html 看起来像 -

<ul>
<li><a href="/link1" class="one">Red</a></li>
<li><a href="/link2" class="two">Blue</a></li>
<li><a href="/link1" class="one">Square</a></li>
<li><a href="/link3" class="three">Green</a></li>
<li><a href="/link2" class="two">Circle</a></li>
<li><a href="/link3" class="three">Triangle</a></li>
</ul>

我认为这可能很容易用 jquery 完成，但需要一点帮助。

谢谢。

Answer 1

这是一个非常简单的方法，使用 addEventListener 和 mouseover 事件

它将悬停元素类设置为ul，然后简单地将类ul.one .one配对

document.querySelector('ul').addEventListener('mouseover', function(e) {
  this.className = e.target.className;
})

ul.one .one {
  color: red;
}
ul.two .two {
  color: yellow;
}
ul.three .three {
  color: green;
}

<ul>
  <li><a href="/link1" class="one">Red</a></li>
  <li><a href="/link2" class="two">Blue</a></li>
  <li><a href="/link1" class="one">Square</a></li>
  <li><a href="/link3" class="three">Green</a></li>
  <li><a href="/link2" class="two">Circle</a></li>
  <li><a href="/link3" class="three">Triangle</a></li>
</ul>

Answer 2

使用 jQuery。

https://jsfiddle.net/cofr7498/

$(".one").mouseover(function(){
  $(".one").css("color", "red");
});
$(".one").mouseout(function(){
  $(".one").css("color", "blue");
});
$(".two").mouseover(function(){
  $(".two").css("color", "red");
});
$(".two").mouseout(function(){
  $(".two").css("color", "blue");
});
$(".three").mouseover(function(){
  $(".three").css("color", "red");
});
$(".three").mouseout(function(){
  $(".three").css("color", "blue");
});

li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="/link1" class="one">Red</a></li>
  <li><a href="/link2" class="two">Blue</a></li>
  <li><a href="/link1" class="one">Square</a></li>
  <li><a href="/link3" class="three">Green</a></li>
  <li><a href="/link2" class="two">Circle</a></li>
  <li><a href="/link3" class="three">Triangle</a></li>
</ul>