CODEWITHSUNDEEP
javascriptjquerycsshover
starbucks
starbucks

Reputation: 3016

How can I delay the speed of hover purely via CSS3 for a div?

Please review the JSFiddle I am using: http://jsfiddle.net/txdwg/2/

HTML: 

<a href="#">Hover here</a>
<div>Show me now!</div>

CSS:

div {
  display:none; 
  width:100px; 
  height:100px; 
  background:red; 
  margin:20px;
  }
a {
  font-size:16px; 
  font-weight:bold;
  }

JS: 

(function($){
$.fn.hoverDelay = function(over, out, ms){
    var delay, ms, that;
    ms = ms || 500;
    that = this;

    that.bind('mouseenter.hoverDelay', function(e){
        delay = setTimeout(function(){
            over.call(that, e);
        }, ms);
    }).bind('mouseleave.hoverDelay', function(e){
        clearTimeout(delay);
        out.call(that, e);
    });
};

})(jQuery);

$(function(){
$('a').hoverDelay(function(){
    $('div').fadeIn(300);        
}, function(){
    $('div').fadeOut(300);    
}, 300);

});

But instead of JS I want to do this via CSS3. How can I still use the hover pseudo selector and have a similar animation?

Upvotes: 3

Views: 599

Answers (1)

coma
coma

Reputation: 16639

http://jsfiddle.net/bvgVK/2/

div {
    width: 100px; 
    height: 100px; 
    background: red; 
    margin: 20px;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -ms-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

a {
    font-size: 16px; 
    font-weight: bold;
}

a:hover + div {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
}

Is something like that with all the vendor prefixes, but as uross suggested, go to that page or use http://cssprefixer.appspot.com/ or something else, but animations without js or flash or something else in MSIE < 10, hummm... dunno.

Upvotes: 11

Related Questions