CSS：悬停选择器不显示嵌套在带有 display:block 的标签中的图像

Question

我有一堆 if <a> 标签，这些标签具有与之关联的唯一 ID，以及 <img> 的子元素。我希望默认隐藏图像（display:none），并在您将鼠标悬停在它们所属的<a> 标签上时使其可见。但是，目前当我在我的 css 中使用 #a-tag-id:hover 选择器尝试此行为时，图像在悬停时不会变得可见。

不太确定我做错了什么。

这是一个具有相同行为的小提琴。

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

这里是原始的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;
}

Answer 1

要在悬停时实现这一点，您的元素需要成为悬停元素的子元素。

需要更改样式的元素必须是悬停元素的后代才能工作

示例

请看下面的例子

 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>

在您的情况下，如果容器中没有其他元素并且只有您想要悬停的 achor 标记（即容器的子级）可见，而不是当您将鼠标悬停在它上面时，您就是悬停在父级上。所以你可以根据你的具体情况对其进行概括，这个黑客可以工作

#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>