javascript - jQuery hover替换HTM hover属性淡入效果

Question

我正在寻找一种 jQuery 技术或插件，使用它我们的默认悬停属性应该成为淡入 jQuery 悬停属性。假设如果我们将鼠标光标放在任何 div 上，它的背景应该淡入悬停。 请看这张图片。

Answer 1

您还可以使用 CSS3 过渡。即使 IE 不支持 CSS3 转换，您仍然可以在 IE 中获得悬停效果，只是没有淡入淡出。

基本思想是使用 JavaScript 在悬停时添加和删除类。然后使用 CSS3 过渡动画背景颜色过渡。

HTML:

<div class="entry">
     Lorem Ipsum
</div> 
<div class="entry">
     Dolor Etam
</div> 
<div class="entry">
     Lorem Elar
</div>

JavaScript:

$('.entry').mouseenter(function (event) {
    $(this).addClass('active');                
});
$('.entry').mouseleave(function () {
    $(this).removeClass('active');
});

CSS:

.entry {
    background: #fff;
    border-bottom: 1px dotted #ccc;    
    -webkit-transition:background-color 2s,-webkit-transform 2s;
    transition:background-color 2s, transform 2s;    
}

.entry.active {
    background: #ddd;
}

JSFiddle 演示:http://jsfiddle.net/d57BW/

CSS3 转换用法引用:http://caniuse.com/css-transitions