j在鼠标上查询输入背景颜色淡入淡出

jQuery on mouseEnter fade in background color

本文关键字：背景 颜色 淡入 淡出 输入 查询 鼠标      更新时间：2023-09-26

我正在尝试获得一个<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>

我只会为此使用纯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 时，它将无法在较旧的浏览器中工作。

第一个问题是你的 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/

希望能有所帮助

相关文章：