CSS: hover selector is not displaying image nested in a tag with display:block

Question

I have a bunch if <a> tags that have unique ids associated with them and children elements that are <img>. I would like to have the images hidden (display:none) by default and have them become visible when you hover over the <a> tag to which they belong. However, currently when I try this behavior using the #a-tag-id:hover selector in my css, the image does not become visible in the event of hovering.

Not really sure what I am doing wrong.

here is a fiddle with the same behavior.

http://jsfiddle.net/ebbnormal/bobmrud0/1/

Here is the original haml/css:

#map
  %a#saddleback_point
    =image_tag('saddleback_college.png', width:'300px')
  %a#citrus_point
    =image_tag('citrus_college.png', width:'300px')
  %a#sonrise_point
    =image_tag('sonrise.png', width:'300px')
  %a#vegas_point
    =image_tag('vegas.png', width:'300px')
  %a#tennessee_point
    =image_tag('tennessee.png', width:'300px')
  %a#chestnut_point
    =image_tag('chestnut.png', width:'300px')
  %a#saint_point
    =image_tag('saint.png', width:'300px')
  %a#boston_point
    =image_tag('boston.png', width:'300px')
  %a#fisher_point
    =image_tag('fisher.png', width:'300px')

#citrus_point img{
   top:360px;
  bottom:0px;
  left:240px;
   position:absolute;
   display:none; //TODO This is broken!
}
#citrus_point:hover img{
   display:block;
}

You know that `//` isn't valid CSS comment syntax right? And if you set something to display:none, how will hover get triggered if it's not being displayed? — j08691, Dec 23 '14 at 17:59
@j08691 Regrettably, I didn't know. Now I do. I updated the Fiddle. Thank you! — Thalatta, Dec 23 '14 at 18:02

A.B · Accepted Answer · 2014-12-23T18:16:19.063

1

To achieved this on hover your element need to be the child of the element that is hovered.

The element whoes styles are needed to be changed must be the descendent of the hovered element to work

Example

See the example below

 img{

   display:none; //TODO This is broken!
}
#my_a:hover img{
  display:block;
}
#my_a_withoutext{
   display:block;
   min-height:10px;
   min-width:10px;
   background:pink;
}
#my_a_withoutext:hover img{
  display:block;
}

<div id="unique_container">
    <a id="my_a">
        test
        <img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
    </a>
   <a id="my_a_withoutext">
       
        <img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
    </a>
    
</div>

In your case if no other elements are there in container and only the achor tag that you want to hover(that is child of the container) is visible than when you hover over it you are hovering parent. so you can generalize it for your specific condition this hack can work

#my_a img{

   display:none; 
}
#my_a:hover img{
   display:block;
}

#test{
 
 
}
#test:hover{
  display:normal;
}
#unique_container:hover img{
    display:block;
    
}

<div id="unique_container">
    <a id="my_a">
        <img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
    </a>
    <a id="test">
        Hello Can you See Me?
    </a>
</div>

edited Dec 23 '14 at 18:16

answered Dec 23 '14 at 18:00

A.B

20,110
3
37
71

so the `` has to have some other content for the other hover to work? It can't be just an image? As in my original site the ideal behavior would involve a `` tag without text... – Thalatta Dec 23 '14 at 18:02
I have tried selecting specifically for the `` child of the `` without having the text like you have there with "test" and it doesn't work. – Thalatta Dec 23 '14 at 18:04
1

no it can be an other image but it should have something visual so that user knows that he/she has to hover it – A.B Dec 23 '14 at 18:04
well the context is a map which is a background image, and when you hover over discrete points on the background image (which are visible to the user) then the absolutely positioned `` tag child image corresponding to the background points would be displayed. – Thalatta Dec 23 '14 at 18:05
I don't know what HOTSPOTS are. – Thalatta Dec 23 '14 at 18:08
1

@Thalatta see it can work without text , but you need to make something to hover onto it – A.B Dec 23 '14 at 18:10
Yes but I was trying to follow the following advice via this post: http://stackoverflow.com/questions/15649184/image-hover-when-over-area-map see kristina childs advice on implementing hover effects which avoids all of the coords of the map. – Thalatta Dec 23 '14 at 18:12
1

@Thalatta i have edited and placed another run script for your scenerio – A.B Dec 23 '14 at 18:13
Ok I get it now. Just do whatever you were doing but change your HTML using this implementation. So instead of images, use div id in normal/hover. Or from stackoverflow itself http://stackoverflow.com/questions/1137517/how-to-position-absolute-inside-a-div – agentpx Dec 23 '14 at 18:18

CSS: hover selector is not displaying image nested in a tag with display:block

1 Answers1