Using HTML5 and CSS3, I'm trying to create a div container that, when you hover the mouse over it, slides out and reveals more text. It's definitely not good, efficient code yet, I'm just trying to get the basics to work for a later project. Nothing is happening when I hover the mouse over the div. I tried commenting out the animation part and seeing if just the hover would work, and it doesn't. I tried commenting everything out and writing a very simple animation that required no user interaction, and that didn't work either. I tried running all my code through Dirty Markup and it couldn't find any issues. Because the code is so small, I haven't created a separate style sheet, everything is in the HTML file, and there is no JavaScript element.

I'm stuck. I have no idea why neither hover nor animation are working.

I have written the code in VSCode and have been previewing the file in Mozilla Firefox.

#divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  float: left;
}

div ul {
  display: none;
}

div.hoverButton:hover {
  width: 300px;
  height: 260px;
  animation-name: listOut;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: listOut;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: listOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

div.hoverButton:hover>p {
  display: block;
}

@keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-moz-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-webkit-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

<div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
    <ul>
      <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
    </ul>
  </p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

A few things that need to be addressed:

1. You need to set a position value for the left and top properties to work
2. ul items should not be children of p elements
3. You don't need float for the main element

Overall, this seems like an odd choice for an animation. Do you want the box to grow and not move to the right?

#divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  position: relative;
}

div ul {
  display: none;
}

#divHover:hover {
  width: 300px;
  transition: all 3s ease;
  animation-name: listOut;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: listOut;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: listOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

/* change to ul */
#divHover:hover ul {
  display: block;
}

@keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-moz-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-webkit-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

<div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
   </p>
   <ul>
      <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
    </ul>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

EDIT:

Here's a better solution (no need for keyframes):

#divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  position: relative;
  display: flex;
}

div ul {
  display: none;
  overflow: hidden;
}

#divHover:hover {
  width: 300px;
  transition: all 3s ease;
}


/* change to ul */

#divHover:hover ul {
  display: flex;
}

<div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
  </p>
  <ul>
    <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
  </ul>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>