2

I have a div which is to be shown on hover of another div, but on hovering out it gets hidden again. I am trying not to hide the div on hover out, with the help of CSS but not getting a way.

a:hover b {
  opacity : 1
}

a:unhover b {
  opacity : 1
}

The div element is shown only after hover, but should not get hidden on hover out.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Aman Agarwal
  • 81
  • 2
  • 7

2 Answers2

1

Hope this helps.

I have used key frame animations to produce the desired result:

@keyframes hoverdisplay {
  0% {
   
    opacity: 0;
    max-height:0;
 
  }
  100% {
    
    opacity: 1;

 
  }
}
 .hoverForever div {
  animation: hoverdisplay 1ms backwards paused;   
}
.hoverForever:hover > div {
  animation-fill-mode: forwards;
  animation-play-state: running;

}

div {
  display: block;
 
  background: green;
   width: 150px;
 height: 150px;
 
}
<a href="#" class="hoverForever">
Hover Me to show
   <div>I will stay forever !</div>
</a>
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33
0

http://jsfiddle.net/sELKu/152/ Please check this

#a:hover+ #b{
  display:block;
}

Updated fiddle http://jsfiddle.net/sELKu/153/ Please check this CSS

#a,
#b {
    width: 100px;
    height: 50px;
    background: black;
}
#b {
    margin-top: 50px;
    opacity: 0;
    transition: 0s 180s;
}
#a:hover+ #b {
    opacity: 1;
    transition: 0s;
}
#a {
    transition: 0s 180s;
}
Geethu Nimesh
  • 60
  • 7