Reputation: 19587

hover on element with jquery only when hover on his container

I have this html

<ul class="accordion" id="accordion">

                <li class="bg4">
                    <div class="heading">fdgfdg</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>fdgdf</h2>
                        <p>dfgdfg</p>
                        <a href="#">fdgdfg&rarr;</a>
                    </div>
                </li>
                <li class="bg5 bleft">
                    <div class="heading">מגדל מטלון</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>ffg</h2>
                        <p></p>
                        <a href="#">more &rarr;</a>
                    </div>
                </li>
            </ul>

And I have this code

 $(function () {
                $('#accordion > li').hover(



                    function () {
                        var $this = $(this);
                        $this.stop().animate({ 'width': '480px' }, 500);
                        $('.heading', $this).stop(true, true).fadeOut();
                        $('.bgDescription', $this).stop(true, true).slideDown(500);
                        $('.description', $this).stop(true, true).fadeIn();
                    },
                    function () {

                            var $this = $(this);
                            $this.stop().animate({ 'width': '122px' }, 500);
                            $('.heading', $this).stop(true, true).fadeIn();
                            $('.description', $this).stop(true, true).fadeOut(500);
                            $('.bgDescription', $this).stop(true, true).slideUp(700);

                    }
                );
                    });

right now when hover on one of the <li> is width is growing (and shrink when unhover)

Is there a way that the <li> unhover code will excute only if I hover on other li and when The container(the <ul>) loose focus it will stay the same size withot excuting the unhover code?

Upvotes: 0

Answers (3)

Pow-Ian

Reputation: 3635

I assumed you only wanted to collapse the items when some other external condition is met, so I used a button.

Assuming you only want one open at a time, I agree with Milind Ansatwar that you need to watch the mouse enterevent of the li's.

You change only the items that were not this item:

    $('#accordion > li').mouseenter(function(){
        var $this = $(this);
        var $others = $('#accordion > li').not($this);

        $this.stop().animate({
            'width': '480px'
        }, 500);
        $('.heading', $this).stop(true, true).fadeOut();
        $('.bgDescription', $this).stop(true, true).slideDown(500);
        $('.description', $this).stop(true, true).fadeIn();

        $others.stop().animate({
            'width': '122px'
        }, 500);
        $('.heading', $others).stop(true, true).fadeIn();
        $('.description', $others).stop(true, true).fadeOut(500);
        $('.bgDescription', $others).stop(true, true).slideUp(700);
    });

Now when you move over the items you never trigger a mouse out or a 'dehover' and so they stay open all the time until you enter another li.

I added a button to collapse the items in case it is undesirable to have them open all the time.

Here is a working demonstration.

Ok 15th time is the charm:

I modified the code so that the place holder is not used and instead you are changing the way that the header is positioned. This effectively eliminates the dance:

    $('#accordion > li').mouseenter(function(){
        var $this = $(this);
        var $others = $('#accordion > li').not($this);

        $this.stop().animate({
            'width': '480px'
        }, 500);
        $('.heading', $this).stop(true, true).css('position','absolute').fadeOut('500');
        $('.description', $this).stop(true, true).fadeIn();

        $others.stop().animate({
            'width': '122px'
        }, 500);
        $('.description', $others).stop(true, true).fadeOut(500,function(){
            $('.heading', $others).stop(true, true).fadeIn();
            $('.heading', $others).css('position','static');
        });              
    });

it also eliminates a bit of the jumping the rows did but not all of it. I mean after all you are collapsing the row so it is going to jump out from under the mouse.

Upvotes: 1