javascript - jQuery on mouseEnter 背景颜色淡入淡出

Question

我正在尝试获取 <h2>和它的兄弟<p>的背景颜色在悬停时淡化为不同的颜色，当您不再悬停在其上时淡化回原始颜色。

我好像不太对..

这是我的 JS:

jQuery('div.flex-caption h2').hover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#2F2F2F'}).fadeIn( 500 );
},
function() {
    jQuery( this ).css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
});

jQuery('div.flex-caption p').hover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#2F2F2F'}).fadeIn( 500 );
},
function() {
    jQuery( this ).css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
});

HTML 标记:

<div class="flex-caption">
<h2 class="captionTitle">TITLE</h2>
<div class="captionText">CONTENT</div>
</div>

Answer 1

我会为此使用纯 CSS。

您可以在 CSS3 中使用 transition 来完成您想要做的事情。

h2 {
    background-color: red;
    transition: background-color .25s ease-in-out
    -moz-transition: background-color .25s ease-in-out
    -webkit-transition: background-color .25s ease-in-out
}

h2:hover {
    background-color: blue;
}

当您悬停在 h2 元素上时，hover 伪类将匹配。

这是一个 fiddle 展示和例子。

http://jsfiddle.net/sC4He/

注意:使用 CSS3，它不能在旧版浏览器中工作。