Question 266605 in Html Question posted in
Some basic documentation can be found here.

Html – Show inner elements in an element on hover

I am trying to create a div with a background image and buttons on top of them. What I want is for the buttons to appear when I hover over the outer div.

Below are two simple examples. The first one has the two divs separated for hovering and showing. The second has one div inside the other. What am I missing to display the inside div on hover?

<!DOCTYPE html>
<html>
<head>
<style>
.dtl-image {
  border:1px solid #000;
  min-height:300px;
  background: center / contain no-repeat url("https://inventivewebdesign.com/wp-content/uploads/IWD-Logo-w-text-2016_600x425.png");
}

.img-hover {
  display: none;
}
    
.dtl-image:hover + .img-hover {
  display: block;
}
</style>
</head>
<body>

<h2>Display an Element Below Image on Hover </h2>

<div class="dtl-image"></div>
<div class="img-hover">I am shown when someone hovers over the div above.</div>

<h2>Display an Inside Element Below Image on Hover</h2>

<div class="dtl-image">
  <div class="img-hover">I am shown when someone hovers over the outer div.</div>
</div>


</body>
</html>
Tags:

2

Answers


  1. 0

    It’s better to use positioning for that, rather than display: none, as it’s more accessible. Here, I’ve set the outer div to position: relative and the inner to position: absolute;:

    .dtl-image {
  position: relative;
  border:1px solid #000;
  min-height:300px;
  background: center / contain no-repeat url("https://inventivewebdesign.com/wp-content/uploads/IWD-Logo-w-text-2016_600x425.png");
}

.img-hover {
  left: 10000px;
  background-color: rgb(0,0,0,0.1);
  position: absolute;
}
    
.dtl-image:hover .img-hover {
  inset: 0;
}
    <h2>Display an Inside Element Above Image on Hover</h2>

<div class="dtl-image">
  <div class="img-hover">I am shown when someone hovers over the outer div.</div>
</div>

    I assume that’s the effect you wanted. If not, please clarify!

    Login or Signup to reply.
  2. 0

    You can either simply remove the "+" which specifies that the ‘.img-hover’ you are targeting is a sibling to the div being hovered, or alternatively you can specify that you would like to select the child ‘.img-hover’ inside of the div being hovered with ‘>’. Both options should give you the result you are after.

    <!DOCTYPE html>
<html>
<head>
<style>
.dtl-image {
    border:1px solid #000;
    min-height:300px;
    background: center / contain no-repeat url("https://inventivewebdesign.com/wp-content/uploads/IWD-Logo-w-text-2016_600x425.png");
}

.img-hover {
    display: none;
}

.dtl-image:hover .img-hover {
    display: block;
}
</style>
</head>
<body>

<h2>Display an Inside Element Below Image on Hover</h2>

<div class="dtl-image">
  <div class="img-hover">I am shown when someone hovers over the outer div.</div>
</div>


</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search