0

I want my div to become partially transparent 1 second after I hover cursor on it. When no longer hovering I want it to return to its default full opacity immediately without any time delay. I know very very javascript so I don't know how to do this.

Any help much appreciated thanks in advance

Usman Sikander
  • 69
  • 9
  • That delay could be bad for the user experience, any reason why you want it? Having said that, this question has been asked before and answered well here, You can use hoverintent plugin to accomplish it: http://stackoverflow.com/questions/435732/delay-jquery-hover-event – Nathaniel Flick Dec 25 '16 at 11:36
  • @NathanielFlick that delay is good in this case trust me but can u help – Usman Sikander Dec 25 '16 at 11:37
  • Yes I updated my answer above. Remember delaying hover doesn't work on mobile devices since there is no "hover" state for them, only touch/click. – Nathaniel Flick Dec 25 '16 at 11:38
  • @NathanielFlick i will check it out but would prefer a plugin less solution – Usman Sikander Dec 25 '16 at 11:39
  • There are some no plugin solutions on that answer, have a read there. The one that talks about checking if there's a timer running and killing it first before starting a new timer on a new hover. This keeps the timer time from being cumulative. – Nathaniel Flick Dec 25 '16 at 11:39
  • This is the non plugin solution from that link: http://stackoverflow.com/a/435793/4335939, change the "500" to "1000" for one second. – Nathaniel Flick Dec 25 '16 at 11:42
  • thanks so much bro by the way in case you are wondering i am trying to mimic functionality on https://www.greats.com/ – Usman Sikander Dec 25 '16 at 11:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131437/discussion-between-nathaniel-flick-and-usman-sikander). – Nathaniel Flick Dec 25 '16 at 11:45

1 Answers1

1

Actually, you shouldn't use js in this case. CSS Transitions would be better, cause they are smoother and more efficient than js/jQuery animations.

Below you have example with 2 seconds delay on hover. 

.btn{
  display: inline-block;
  padding: 5px 10px;
  background: rgba(0,0,0,1);
  color: #fff;
  text-decoration: none;
  -webkit-transition: background 0.5s ease 0s;
  transition: background 0.5s ease 0s;
}
.btn:hover{
  -webkit-transition: background 0.5s ease 2s;
  transition: background 0.5s ease 2s;
  background: rgba(0,0,0,0.5);
}
<a href="#" class="btn">Text</a>
Kuba
  • 1,415
  • 1
  • 18
  • 29