CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Austin Biggs
Austin Biggs

Reputation: 177

jQuery on mouseEnter fade in background color

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>

Upvotes: 0

Views: 228

Answers (2)

elyasnew
elyasnew

Reputation: 1

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

see also http://jsfiddle.net/sC4He/5/

hope it can help

Upvotes: 0

Justin Wood
Justin Wood

Reputation: 10041

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.

Upvotes: 1

Related Questions