Question

我的菜单有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：

<div class="main">
                <a class="hover_link l1" href="">Link1</a>
                / 
                <a class="hover_link l2" href="">Link2</a>
                /
                <a class="hover_link l3" href="">Link3</a>
                /
                <a class="hover_link l4" href="">Link4</a>
</div>

和CSS：

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;
}

但不起作用-_-'

Answer 1

将主要悬停切换到包装div。

换句话说，当.main悬停时，悬停会启动以更改所有链接但是当链接本身悬停时会添加其他样式。

a {
  text-decoration: none;
  position: relative;
}

.main {
  position: fixed;
  text-align: center;
  width: 54%;
  font-size: 24px;
  /* for demo purposes */
}

.hover_link {
  text-decoration: none;
  font-family: 'Montserrat';
  font-weight: 900;
  color: black;
}

.main:hover .hover_link {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.main:hover .hover_link:hover {
  text-decoration: none;
  color: red;
  -webkit-text-fill-color: red;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: red;
}

<div class="main">
  <a class="hover_link l1" href="">Link1</a> /
  <a class="hover_link l2" href="">Link2</a> /
  <a class="hover_link l3" href="">Link3</a> /
  <a class="hover_link l4" href="">Link4</a>
</div>

Answer 2

您可以通过在主容器上使用悬停来尝试这样的事情：

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

<div class="main">
  <a class="hover_link" href="">Link1</a> /
  <a class="hover_link" href="">Link2</a> /
  <a class="hover_link" href="">Link3</a> /
  <a class="hover_link" href="">Link4</a>
</div>

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

2 个答案: