css 链接仅在悬停图像时出现

Question

i want to make the f1 link appearing on image only on hovering the image. i tried this but this is not working, link is not appearing. can someone explain the problem and type a working code?

<div class="caine1">
      <img src="1.png" width="400" height="250"></img>
      <a href="#" id="f1">Female</a>
       </div>

   

    #f1 {
    position:absolute;
    display: none;
    z-index: 200;
}


.caine1 img:hover #f1 {
    display: inline-block;
}

Answer 1

You're missing + .

 #f1 { position: absolute; display: none; z-index: 200; } /* You missed a + here */.caine1 img:hover + #f1 { display: inline-block; }

 <div class="caine1"> <img src="1.png" width="400" height="250" /> <,--Also, images don't have closing tags - they're self closing like <br/>--> <a href="#" id="f1">Female</a> </div>