1

I want to set visibility of "p" element on .img:hover.

HTML

<div class="imgCont">
    <div class="conoc">
        <p class="like">&#10084;</p> <!-- I want to select this "p" element on .img:hover -->
        <img class="img" src="uploads/img.jpg" alt="" >
    </div>
</div>

CSS

.like {
    visibility: hidden;
    position: absolute;
    z-index: 3;
}

.img:hover + .like {
    visibility: visible;
}
H2102M
  • 13
  • 3
  • 1
    yours should work if you place the

    element after your element. "+" selects the element immediately after the first selected element. As mentioned in the link above, .img:hover ~ .like will select every .like element that is preceded by an .img element.

     – Ross Jan 26 '21 at 18:58
  • I resolve problem. Thank you. – H2102M Jan 26 '21 at 19:09

1 Answers1

-1

You need to replace the p tag of the image

<div class="imgCont">
    <div class="conoc">
        <img class="img" src="uploads/img.jpg" alt="image" >
        <p class="like">&#10084;</p>
    </div>
</div>

You can see it from JSFiddle Online

Mahdi
  • 307
  • 6
  • 19