javascript - 使文本淡入并保持可见，直到鼠标离开容器

Question

当鼠标指针位于容器中时，我正在努力使文本淡入并保持可见并且只有当鼠标指针离开指定区域时，文本才会fadeOut，但由于某种原因它不起作用，文本将fadeOut即使鼠标在容器内。

我正在使用 Jquery lib 1.10.1 以及 Jquery ui 1.11.0

代码如下:

HTML

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
    <div class="conti">
        <div class="arrow-right"></div>
    </div>
    <div class="text-fade"></div>  
</div>

CSS

.hold{
    width: 142px;
    background: yellow;
    overflow: hidden;
    padding:10px;
}
.conti{
    width: 30px;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
}
.text-fade{
    display: none;
    float: right;
    margin-top:-30px;
    margin-left: 10px;
    margin-right:10px;
}

JS

$('.hold').mouseenter(function () {
    $('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
    $('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
    $('.text-fade').fadeOut(1000);
});

这是我的 fiddle example 的链接

Answer 1

mouseout 由 child 触发，改用 mouseleave

$('.hold').mouseenter(function () {
    // var d = $('.arrow-right');
    // d.effect("bounce", { direction:'right', times:3 }, 700);
    $('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
    $('.text-fade').fadeOut(1000);
});

JS fiddle updated