CODEWITHSUNDEEP
htmlcsshover
merkezci
merkezci

Reputation: 41

CSS hover selector doesn't showing anything

So I'm trying to learn HTML and CSS with solving the frontendmentor challenges. This one's new so i couldn't find a solution to lookup my problem. My problem is; i haven't done any hover effect before so, i tried to make by myself and i couldn't, it should work actually i mean everything looks good but idk. Every help appreciated.

#nft {
  width: 300px;
  border-radius: 7px;
}

#view {
  position: absolute;
  opacity: 0;
  width: 150px;
}

#nft:hover #view {
  opacity: 1;
  cursor: pointer;
}
<div class="nft-img">
  <img id="view" src="./images/icon-view.svg" alt="">
  <img id="nft" src="./images/image-equilibrium.jpg" alt="">
</div>

Upvotes: 0

Views: 91

Answers (2)

Shelly Eldman
Shelly Eldman

Reputation: 59

try to change to:

#nft:hover ~ #view{
    opacity: 1;
    cursor: pointer;
}

Upvotes: 0

Marten
Marten

Reputation: 844

This question is poorly written, please have a look at the guidelines.

However, you haven't defined a height property on your elements, because of this, they are invisible. By default, the height of a block element is the height of the content, and the width is the length of the page. Check out this for further information.

My above answer does not help you, I did not see that you included images. The problem should be solved with this answer. Your selector #nft:hover #view does not work, because these elements are siblings. And also keep the z-index in mind.

Upvotes: 1

Related Questions