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伪类将匹配。

这是一个小提琴展示和示例。

http://jsfiddle.net/sC4He/

注意：使用CSS3时， NOT 可以在旧浏览器中使用。

Answer 2

第一个问题是HTML元素中没有p标记第二个问题是你不能同时使用2个函数来触发事件

所以在这里你可以看到正确的解决方案，

HTML：

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

JS：

jQuery('div.flex-caption h2').mouseover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#2F2F2F'}).fadeIn( 500 );
});
jQuery('div.flex-caption p').mouseover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#2F2F2F'}).fadeIn( 500 );
});
jQuery('div.flex-caption h2').mouseout(function() {
    jQuery( this ).css({background:'#FFFFFF'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#FFFFFF'}).fadeIn( 500 );
});

jQuery('div.flex-caption p').mouseout(function() {
    jQuery( this ).css({background:'#FFFFFF'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#FFFFFF'}).fadeIn( 500 );
});

另见http://jsfiddle.net/sC4He/5/

希望它可以提供帮助

mouseEnter上的jQuery淡入背景色

2 个答案: