Question

当鼠标指针位于容器中时，我正在努力制作文字fadeIn并保持可见 鼠标指针离开指定的区域，只有文本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由孩子触发，改为使用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

Answer 2

将文字直接放入＆＃34; .text-fade＆＃34;然后过渡到＆＃34; .text-fader＆＃34;类。然后通过JS更改文本颜色。

这里是从#FFFFFF更改为＃000000并再次返回的代码：

$('.hold').mouseenter(function () {
    $('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
    $('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
    $('.text-fade').css('color', '#FFFFFF');
});

Answer 3

您正在使用错误的函数，其mouseenter（）和mouseleave（）

working fiddle here

你的javascript

$('.hold').mouseenter(function () {
    $('.text-fade').text("this is a test text");
    $('.text-fade').fadeIn(1000);
    $('.text-fade').show();
});
$('.hold').mouseleave(function () {
    $('.text-fade').fadeOut(1000);
});

你的弹跳功能似乎也会导致一些我无法找到的问题，所以我将其删除了

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

3 个答案: