jQuery on mouseEnter fade in background color

Question

I'm trying to get an <h2> and it's sibling <p>'s background color to fade to a different color on hover and fade back to the original color when you're no longer hovering over it.

I can't seem to get it right..

Here's the JS I have:

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 );
});

The HTML markup:

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

And `rgba(0, 0, 0, 0.5)` is not the original color (it should be white). — Chris Laplante, Nov 11 '13 at 18:04
Have a look here: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — hugo der hungrige, Nov 11 '13 at 18:08

Justin Wood · Answer 1 · 2013-11-11T19:01:45.323

I would just use pure CSS for this.

You can use transition in CSS3 in order to accomplish what you are trying to do.

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;
}

The hover pseudo-class will match when you are hovering on the h2 element.

Here is a fiddle showing and example.

http://jsfiddle.net/sC4He/

NOTE: With this using CSS3, it will NOT work in older browsers.

score 0 · Answer 2 · answered Nov 11 '13 at 19:07

The first problem is that you have no p tag in your HTML element and the second problem is that you can not use 2 functions simultaneously for triggering an event

so here you can see the correct solution,

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 );
});

jQuery on mouseEnter fade in background color

2 Answers2