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/或其他内容，但是没有js或flash的动画或MSIE中的其他内容＆lt; 10，哼哼...不知道。

如何通过CSS3为div延迟悬停的速度？

1 个答案: