在鼠标悬停时打开div并在单击同一div中的链接时保持打开状态

Question

所以,我正在做一个标签布局.鼠标悬停时标签越来越大,鼠标输出标签越来越小,我在每个标签中都有一个链接,打开div.问题是,当我将鼠标放在此链接上时,选项卡会变小,因为鼠标会离开此选项卡.所以,我的问题是 - 如何将这两者结合在一起,以便只有当鼠标实际离开那个区域时,它才能更加平滑和穿着？

这是我的代码:

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

这是我的小提琴

先感谢您!

Answer 1

更改mouseout到mouseleave.Mouseleave事件仅在鼠标离开元素时触发.

如果你看到文档,就会清楚地解释.

mouseleave事件与mouseout处理事件冒泡的方式不同.如果在此示例中使用了mouseout,那么当鼠标指针移出Inner元素时,将触发处理程序.这通常是不受欢迎的行为.另一方面,mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序,而不是后代.因此,在此示例中,处理程序在鼠标离开Outer元素时触发,而不是Inner元素.

JS代码

$('.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);
});

看小提琴