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;
}
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>