CODEWITHSUNDEEP
htmlcsshoverdisplay
user5132897
user5132897

Reputation:

Div not showing on hover?

So, I'm trying to make this so when I hover over the image, the div appears. Unfortunately, I am not able to get it to do so, and I'm at a loss as to why it's not working.

Here is my code:

.summary:hover {
  opacity: .6;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.summaryOverlay {
  position: absolute;
  margin-left: 5%;
  margin-top: 3%;
  height: 200px;
  width: 280px;
  z-index: 2;
  background-color: #E7DFDD;
  color: #0E0B16;
  font-family: Verdana;
  font-size: 15px;
  opacity: .9;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  text-align: center;
  display: none;
}

.summary:hover .summaryOverlay {
  display: block;
}
<div class="leftAlign" id="lastWish">
  <img class="summary" alt="the last wish" src="lastWish.jpg" style="width: inherit; height: inherit;" />
</div>
<div class="summaryOverlay">
  Geralt is a witcher.
  <br><br> &nbsp;Yet he is no ordinary killer-for-hire.
  <br><br> His sole purpose: to destroy the monsters that plague the world.
  <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Upvotes: 0

Views: 1007

Answers (2)

Tejasvi Karne
Tejasvi Karne

Reputation: 648

Your CSS is not asking the browser to display the div on hovering over the image as you intended. Rather, it is asking the browser to display a child of .summary which has a class summaryOverlay. img can't ever have a child element, can it? Even if it could, .summaryOverlay is not its child. So, it won't work as you intended. Try this:

#lastWish:hover + .summaryOverlay{
  display:block;
}

Barring any CSS specificity issues, it should give you what want. Let me know how it goes.

Upvotes: 0

dippas
dippas

Reputation: 60553

Because .summaryOverlay isn't child of .summary, as you stated here:

.summary:hover .summaryOverlay {
  display: block;
}

So you need to hover in .leftAlign (.summary's parent) which is the .summaryOverlay sibling, you need for that to use the adjacent sibling selector +

Note: remove the inline styles, they are a bad practice to use them

.summary:hover {
  opacity: .6;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.summaryOverlay {
  position: absolute;
  margin-left: 5%;
  margin-top: 3%;
  height: 200px;
  width: 280px;
  z-index: 2;
  background-color: #E7DFDD;
  color: #0E0B16;
  font-family: Verdana;
  font-size: 15px;
  opacity: .9;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  text-align: center;
  display: none;
}

.leftAlign:hover + .summaryOverlay {
  display: block;
}
<div class="leftAlign" id="lastWish">
  <img class="summary" alt="the last wish" src="//placehold.it/100x100" />
</div>
<div class="summaryOverlay">
  Geralt is a witcher.
  <br><br> &nbsp;Yet he is no ordinary killer-for-hire.
  <br><br> His sole purpose: to destroy the monsters that plague the world.
  <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Upvotes: 2

Related Questions