javascript - 如何纯粹通过 CSS3 为 div 延迟悬停速度？

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

});

但是我想通过 CSS3 来代替 JS。我怎样才能仍然使用悬停伪选择器并拥有类似的动画？

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 或其他东西的动画，嗯... 不知道。