CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Unknown developer
Unknown developer

Reputation: 5930

Hover out from two divs simultaneously

Have a look at the following JQuery code: 

function my_hover()
{ 
$( "#up,#down" ).hover(
   function() {
       $("#up").animate({
    "background-color": "#020306"
         });               
    $("#down").animate({
        "background-color": "#171716"
    });           
      },
function() {
       $("#up").css("background-color","#C8CACF" );       
   $("#down").css("background-color","#FAFAF8" );
      }
   );
}

There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable). Thank you

Upvotes: 0

Views: 341

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49208

Using the technique @nnnnn alluded to, e.g., using a timeout:

(function init() {
    var $up = $('#up'),
        $down = $('#down'),
        hovered = false;

    $up.hover(over, out);
    $down.hover(over, out);

    function over() {
        hovered = true;

        $up.css({
            "background-color": "#020306"
        });
        $down.css({
            "background-color": "#171716"
        });
    }

    function out() {
        setTimeout(function to() {
            if (!hovered) {
                $up.css("background-color", "#C8CACF");
                $down.css("background-color", "#FAFAF8");
            }

        }, 1000);

        hovered = false;
    }
})();

http://jsfiddle.net/TudqT/3/

And with the elements inline next to each other, instead of vertically aligned:

http://jsfiddle.net/TudqT/5/

Upvotes: 1

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this.

HTML

<div id="up">Up</div>
<div id="down">down</div>

CSS

div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}

Script

$('#up, #down').mouseenter(function(){
    //alert('hi')
    $("#up").addClass('up-hover');               
    $("#down").addClass('down-hover');  
})
.mouseleave(function(){
    //alert('hi')
    $("#up").removeClass('up-hover');               
    $("#down").removeClass('down-hover');  
});

Fiddle Demo

Upvotes: 2

Related Questions