Andreas Eilertsen Lybo Andreas Eilertsen Lybo - 1 year ago 96
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.

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


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


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

Any help is greatly appreciated. Thank you

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download