How to solve css double hover issue? Making an image map

Question

I am trying to make an image map that pops-up different pictures at different places on the map. I want to be able to make a second "pop-up" after the first one on my images, but I have tried various changes to my code and it has yet to be effective. Is what I am trying to do possible in CSS? I feel like it should be, but because I am not aware of any examples of it, I feel uncertain.

I realize that part of the problem is that the "inner" span which indicates my "hello" box is not distinguished from the "span" that goes with the box with the picture. I am not sure how to make these distinct. The Second dot turns from blue to yellow only when it is being hovered over, so I don't know why the "hello!" box does not behave the same way.

Here is my code: http://jsbin.com/AmAqito/3/edit?html,css,output

*Notice the blue dot in the middle.

Thanks!

Answer 1

Try changing your #map li a:hover span selector to #map li a:hover > span. This will target only the span on the level immediately after the anchor tag.

The demo http://jsbin.com/ibAtiNu/1/edit