锚突破了波浪形

Question

我正在尝试使用波浪号来改变另一个元素的不透明度，但我还需要该元素有一个锚标记，但这会破坏过渡。要清除我有2个元素。 #china和#map。当我悬停#china时，我希望#map更改不透明度。当没有锚标记时，这可以工作。

CSS：

#china:hover ~ #map {
    opacity: 0.1;
}

HTML：

<section id="map-container">
    <a href="#article-info-china"><article id="china"></article></a>
    <article id="map"></article>
</section>

非常感谢任何帮助。谢谢

Answer 1

这是正常行为。 ~选择器不会起作用，因为它试图在#map之后找到#china元素，而不是这种情况。为了工作，您可以将:hover选择器设置为锚标记，如下所示：a:hover ~ #map。

这将选择#map元素，因为它位于ancor标记之后。

但是当您在#china元素之外时，您可能不希望拥有不透明度。

Answer 2

a[href$='#article-info-china']用于选择<a>

的href = #article-info-china

a[href$='#article-info-china']:hover ~ #map {
opacity: 0.1;
}

#map{
  
  height: 100px;
  width: 100px;
  background: red;
}

<section id="map-container">
    <a href="#article-info-china"><article id="china">hello</article></a>
    <article id="map"></article>
</section>