jQuery on mouseEnter淡入背景色答案

【问题标题】：jQuery on mouseEnter fade in background colorjQuery on mouseEnter淡入背景色
【发布时间】：2013-11-11 18:00:07
【问题描述】：

我正在尝试让<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>

【问题讨论】：

当你尝试这个时会发生什么？
您的标记中没有<p> 元素
而rgba(0, 0, 0, 0.5)不是原来的颜色（应该是白色的）。
它是siblings 而不是sibling。
看看这里：stackoverflow.com/questions/190560/…

标签： javascript jquery html css

【解决方案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 时，它将不在旧版浏览器中工作。

【讨论】：

【解决方案2】：

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

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

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/

希望对你有帮助

【讨论】：