Andreas Eilertsen Lybo Andreas Eilertsen Lybo - 15 days ago 9
CSS Question

Anchor breaks tilde

I'm trying to use tilde for changing opacity of another element, but I also need the element to have an anchor tag but this breaks the transition. To clearify I have 2 elements.

#china
, and
#map
. When I hover
#china
I want
#map
to change opacity. This works when not having an anchor tag infront.

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>


Any help is greatly appreciated. Thank you

Answer

This is the normal behavior. The ~ selector won't do the trick because it tries to find #map element right after #china which is not the case. In order to work you have oto set the :hover selector to the anchor tag, like this: a:hover ~ #map.

This will select the #map element because it is right after the ancor tag.

But you may not want to have the opacity when outside #china element.

Comments