javascript - divのCSS3を介して純粋にホバーの速度を遅らせるにはどうすればよいですか?

Question

私が使用している JSFiddle を確認してください: 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);

});

しかし、JS の代わりに、CSS3 を介してこれを行いたいと考えています。ホバー疑似セレクターを引き続き使用して、同様のアニメーションを表示するにはどうすればよいですか?

Answer 1

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;
}

すべてのベンダープレフィックスでそのようなものですが、urossが示唆したように、そのページに移動するか、http: //cssprefixer.appspot.com/などを使用しますが、MSIE < 10でjsやflashなどのアニメーションを使用しないでください。 ...わからない。