Why doesnt the hover work on a div that included another div?

Question

I just got into html since like 2 weeks and i wanted to create somewhat of a polaroid on which you hover and some information would appear regarding that picture.I think the problem is that i included a div in another one.Also i dont have any program for writing in html yet; just my notepad:)

<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.info{
position:fixed;
display:none;
align:center;
}
.polaroid {
  position: absolute;
  box-shadow: 5px 5px 5px 5px rgba(17, 17, 17, 0.35) ;
  padding: 7px;
  width:220px;
height:inherit;
  background-color:white;
  transition: 1s;
}
.polaroid:hover+ .info{display:block;}
</style>
<div class="polaroid">
<img src="https://katsosco.gr/media/images/products/images/2_MT_GlacierNP500px-200x200.jpg" align="center">
 <div class="info"><p>This is just some random information which should appear extending the polaroid when i hover over it</p>
</div>

</div>



</body>```

Yousaf · Accepted Answer · 2020-05-24T10:24:45.700

0

+ is a sibling combinator which selects adjacent sibling elements.

You need child combinator > to select .info element inside .polaroid

.polaroid:hover > .info{
    display:block;
}

edited May 24 '20 at 10:24

answered May 24 '20 at 10:18

Yousaf

27,861
6
44
69

Thank you! Do you know why it doesnt get displayed in 1 second,instead it does it as soon as i hover on the .polaroid?Does the display property not accept the transition time or ? – Badache Oana May 24 '20 at 10:23
you cannot apply transition on `display` property – Yousaf May 24 '20 at 10:25
i see.Any way as to how i can replace it with something else working? – Badache Oana May 24 '20 at 10:27
see https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property – Yousaf May 24 '20 at 10:35

Why doesnt the hover work on a div that included another div?

1 Answers1