Html 锚断瓦

我试图使用tilde来更改另一个元素的不透明度，但我也需要该元素具有锚定标记，但这会破坏转换。为了澄清，我有两个元素<代码>#中国，和

#地图

。当我悬停在

#china

上时，我希望

#map

更改不透明度。当前方没有锚定标记时，此选项有效

CSS:

HTML:

---

非常感谢您的帮助。谢谢

这是正常的行为。

~

选择器不起作用，因为它试图在

#china

之后找到

#map

元素，但事实并非如此。为了工作，您必须将

：hover

选择器设置为锚定标记，如下所示：

a:hover~#map

这将选择

#map

元素，因为它正好位于ancor标记之后

但是当在

#china

元素之外时，您可能不希望有不透明度。

a[href$='#article info china']

用于选择

我想说这里的问题不是tilde，而是锚（

）元素中id为china的元素不是id为map的元素的兄弟。所以css规则只是不选择那个元素。它们在标记中不共享同一个父元素，所以这不起作用。你能把ID放在链接上吗？@hiddenhobes#中国是一个应该链接到另一篇文章的图像。我不知道我应该如何改变它…中国是一个图像，否则我会把锚定标签放在里面如果你想用

中国

，最好用Javascript抱歉，应该指出这是我在网络上的第一年项目。我们不允许使用JS。谢谢，谢谢。通常是一些简单的事情破坏了我的代码。

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

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