Delay hover effect for child div-CodePudding

In the attached snippet, when you hover on the parent div, the child div is shown. As expected, if you remove the cursor it then disappears.

Is it possible to delay this disappearance for like, 1 second somehow?

ul {
  background: red;
  width: 100px;
}

div {
  display: none;
}

ul:hover div {
  display: block;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

CodePudding user response：

You can set transition speeds & delays without a CSS animation. The transition-delay effect doesn't apply to display properties on hover. It works best with opacity: 0; → opacity: 1; or visibility: hidden; → visibility: visible; See the changes I made to your CSS.

ul {
  width: 100px;
  list-style-type: none;
}

li {
  background: red;
}

div {
  opacity: 0;
  transition: all .4s ease 3s;

}

ul:hover > div {
  background: red;
  opacity: 1;
  transition: .4s;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

EDIT: Removed transition delay, and added transitions to both the ul and the div that has a starting opacity of 0. You can delay the mouse-out effect by adding ease 3s or however long you want the div to delay reverting to opacity: 0; when taking your mouse off.

CodePudding user response：

You can use transition:all .2s ease 2s; attribute to delay the disappearing.

ul {
  width: 100px;
  list-style-type: none;
}

li {
  background: red;
}

div {
  opacity: 0;
  transition: all .2s ease 2s;

}

ul:hover > div {
  background: red;
  opacity: 1;
  transition: .4s;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>