html - Anchor breaks tilde -

i'm trying use tilde changing opacity of element, need element have anchor tag breaks transition. clearify have 2 elements. #china, , #map. when hover #china want #map change opacity. works when not having 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 appreciated. thank you

this normal behavior. ~ selector won't trick because tries find #map element right after #china not case. in order work have oto set :hover selector anchor tag, this: a:hover ~ #map.

this select #map element because right after ancor tag.

but may not want have opacity when outside #china element.