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>

这是my fiddle

提前谢谢！

Answer 1

将mouseout更改为mouseleave。 Mouseleave事件仅在鼠标离开元素时触发。

如果您看到docs，则说明清楚。

mouseleave事件与mouseout处理事件的方式不同冒泡。如果在这个例子中使用mouseout，那么当鼠标指针移出Inner元素，处理程序就是触发。这通常是不受欢迎的行为。 mouseleave事件，另一方面，只有当鼠标离开时才触发其处理程序它被绑定的元素，而不是后代。所以在这个例子中，当鼠标离开外部元素时触发处理程序，但不是内在元素。

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

See fiddle

Answer 2

向div添加一个含糊不清的类（不要删除当前的div），例如Slicerino并将其用作选择器，因此每次将鼠标放在它们上面时，它就会变大！

希望它能解决你的问题！

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

2 个答案: