CODEWITHSUNDEEP
jquerycsseventsmouseevent
Kristine
Kristine

Reputation: 747

Open div on mouseover and keep it open while clicking link in the same div

So, I am making a tab layout. Tabs are getting bigger on mouseover and smaller on mouseout and I have a link in each tab which opens div under. The problem is that when I put my mouse on this link, tab gets smaller, because mouse kind of leaves this tab. So, my question is- how can I put these two together so that it works more smooth and clothes only when the mouse actually leaves that area?

Here is my code:

<script>
$(document).ready(function(){

    $('.slice').mouseenter(function(){
        var $this = $(this);
        $this.data('widthA', $this.css('width')).stop().animate({'width': '250px'}, 400);
        }).mouseout(function(){
            var $this = $(this);
            $this.stop().animate({'width': $this.data('widthA')}, 200);
        });

    $(".tabLink").click(function(){
        $('.projectTab').hide();
        $('#'+$(this).attr('name')).show();   
    });

});    
</script>
<style>
    .slice { color: gray; width: 1%; }
    li { background: yellow; }
    .sliceWrap { margin: 0; height: 70px; padding: 0px; display: table; width: 100%; }
    .sliceWrap  ul { margin: 0; height: 70px; padding: 0px; display: table; background: #ccc; width: 100%; } 
    .sliceWrap li { list-style: none; padding: 0px; width: auto; display: table-cell; white-space: nowrap; padding: 5px; border: 1px solid #c00; }
    .slice a { cursor: pointer; }
    .projectTab { display: none; height: 150px; width: 150px; margin: 0 auto; }
</style>

<div class="sliceWrap">
    <ul>
        <li class="slice"><a class="tabLink" name="first">1</a></li>
        <li class="slice"><a class="tabLink" name="second">2</a></li>
        <li class="slice"><a class="tabLink" name="third">3</a></li>
        <li class="slice"><a class="tabLink" name="fourth">4</a></li>
        <li class="slice"><a class="tabLink" name="fifth">5</a></li>
        <li class="slice"><a class="tabLink" name="sixth">6</a></li>
        <li class="slice"><a class="tabLink" name="seventh">7</a></li>
        <li class="slice"><a class="tabLink" name="eighth">8</a></li>
        <li class="slice"><a class="tabLink" name="ninth">9</a></li>
        <li class="slice"><a class="tabLink" name="tenth">10</a></li>
        <li class="slice"><a class="tabLink" name="eleventh">11</a></li>
        <li class="slice"><a class="tabLink" name="twelfth">12</a></li>
        <li class="slice"><a class="tabLink" name="thirteen">13</a></li>
        <li class="slice"><a class="tabLink" name="fourteen">14</a></li>
        <li class="slice"><a class="tabLink" name="fifteen">15</a></li>
    </ul>
</div>

<div class="projectTab" id="first">1</div>
<div class="projectTab" id="second">2</div>
<div class="projectTab" id="third">3</div>
<div class="projectTab" id="fourth">4</div>
<div class="projectTab" id="fifth">5</div>
<div class="projectTab" id="sixth">6</div>
<div class="projectTab" id="seventh">7</div>
<div class="projectTab" id="eighth">8</div>
<div class="projectTab" id="ninth">9</div>
<div class="projectTab" id="tenth">10</div>
<div class="projectTab" id="eleventh">11</div>
<div class="projectTab" id="twelfth">12</div>
<div class="projectTab" id="thirteen">13</div>
<div class="projectTab" id="fourteen">14</div>
<div class="projectTab" id="fifteen">15</div>

Here is my fiddle

Thank you in advance!

Upvotes: 1

Views: 600

Answers (2)

anpsmn
anpsmn

Reputation: 7257

Change mouseout to mouseleave. Mouseleave event triggers only when the mouse leaves the element.

If you see the docs, it's explained clearly.

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

JS code

$('.slice').mouseenter(function(){
    var $this = $(this);
    $this.data('widthA', $this.css('width')).stop().animate({'width': '250px'}, 400);
    }).mouseleave(function(){
        var $this = $(this);
        $this.stop().animate({'width': $this.data('widthA')}, 200);
});

See fiddle

Upvotes: 5

Rui Silva
Rui Silva

Reputation: 140

Add an ambiguous class to your divs (don't remove the ones who have currently), for example Slicerino and use it as the selector, so everytime you have your mouse over them, it gets bigger!

Hope it solves your problem!

Upvotes: 1

Related Questions