Javascript 悬停一个菜单项时更改多个菜单项的颜色

我的菜单有4个链接。当你进入网站，我希望他们都是黑色的

当您将鼠标悬停在Link1上时，Link2、3和4应该变成透明的黑色轮廓，而Link1应该将颜色更改为红色

与Link2相同-当您将Link2悬停时，它应该变成红色，而链接1、3和4应该是透明的，带有黑色轮廓。等等

当它们都没有悬停时，它们又变黑了

为了提高透明度，我使用以下代码：

  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;

是否可以在CSS中设置，或者我必须使用JS？如果是，怎么做

代码如下： HTML:

我试着用这个：

a.l1:hover > a.l2, a.l3, a.l4 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

---

但不起作用--'

将主悬停切换到包装div

换句话说，当

.main

处于悬停状态时，悬停会启动以更改所有链接，但当链接本身处于悬停状态时，会添加一个附加样式。

a{
文字装饰：无；
位置：相对位置；
}
梅因先生{
位置：固定；
文本对齐：居中；
宽度：54%；
字体大小：24px；
/*用于演示目的*/
}
.悬停链接{
文字装饰：无；
字体系列：“蒙特塞拉特”；
字号：900；
颜色：黑色；
}
.main:hover.hover\u链接{
-webkit文本填充颜色：透明；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：黑色；
}
.main:hover.hover\u链接：hover{
文字装饰：无；
颜色：红色；
-webkit文本填充颜色：红色；
-webkit文本笔划宽度：0px；
-webkit文本笔划颜色：红色；
}

/
/
/

您可以使用主容器上的悬停按钮尝试以下操作：

a{
文字装饰：无；
位置：相对位置；
}
梅因先生{
位置：固定；
文本对齐：居中；
宽度：54%；
字体大小：2.5vw；
}
.悬停链接{
文字装饰：无；
字体系列：“蒙特塞拉特”；
字号：900；
颜色：黑色；
}
.main:悬停a{
-webkit文本填充颜色：透明；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：黑色；
}
a、 悬停链接：悬停{
文字装饰：无；
-webkit文本笔划宽度：0px；
-webkit文本填充颜色：红色；
-webkit文本笔划颜色：红色；
}

/
/
/

使用“+”选择器或

~

是否有办法使其工作，但仅当您将文本而不是整个区域悬停时？当前的“main”类包括文本和中间的空格…有没有办法让它工作，但只有当你将文本，而不是它周围的整个区域悬停时？当前“main”类包括文本和中间的空格…不，这是不可能的…您不能在DOM中选择向后或向上。

a {
  text-decoration:none;
  position: relative;
}
.main {
  position: fixed;
  text-align: center;
  width: 54%;
  font-size: 2.5vw;
}
.hover_link, .l1, .l2, .l3, .l4 {
  text-decoration: none;
  font-family: 'Montserrat';
  font-weight:900;
  color: black;
}
.hover_link:hover {
  text-decoration: none;
  -webkit-text-stroke-width: 0px;
  -webkit-text-fill-color: red;
  -webkit-text-stroke-color: red;
}

a.l1:hover > a.l2, a.l3, a.l4 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}