1

我创建了一个简单的工具提示，当您将鼠标悬停在 (i) 图标上时会淡入。将鼠标悬停在专辑封面上时会出现该图标。目前有一个奇怪的错误，我认为这是由于 .more-info opacity css animate jQuery 方法造成的。我想知道如何解决这个问题或如何更改它可以工作的代码。

错误：当悬停在 (i) 图标上，工具提示出现然后离开它或 (i) 图标时，工具提示会淡出，但如果您在专辑封面完全淡出之前将鼠标悬停在专辑封面上，它会闪烁一点。只有将鼠标悬停在 (i) 图标上或悬停在其自身的工具提示上时，工具提示才会出现。

该错误的视频：http ://www.screenr.com/tIJ8

出现问题的网站：http: //www.midnightlisteners.com/

工具提示 css 文件： http: //www.midnightlisteners.com/wp-content/themes/midnightlisteners-v2.0wp/css/the-tooltip.css

HTML 代码：

<div class="more-info">
    <div class="the-tooltip top center black">
        <span class="too-tip-text">
        <h3>Similar than: <span><?php the_title(); ?> &rsaquo; </span></h3>
        <div class="related">
           <ul>
           </ul>
        </div>
        </span>
    </div>
</div>

​</p>

jQuery代码：

 $(".play").mouseenter(function() {
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '1'
        }, 800, 'linear');
        $(".more-info").mouseenter(function() {
            $(this).stop(true).animate({
                opacity: '1'
            }, 800, 'linear');
        });
    });
    $(".play").mouseleave(function() {
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '0'
        }, 1000, 'linear');
        $(".more-info").mouseleave(function() {
            $(this).stop(true).animate({
                opacity: '0'
            }, 1000, 'linear');
        });
    });


    $(".more-info").mouseenter(function() {
        clearTimeout($(this).data('timeoutId'));
        $(this).find(".the-tooltip").fadeIn('150', 'linear');
    }).mouseleave(function() {
        var someElement = $(this);
        var timeoutId = setTimeout(function() {
            someElement.find(".the-tooltip").fadeOut('150', 'linear');
        }, 1200);
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutId', timeoutId);
    });

CSS 代码：

.more-info{
    position: absolute;
    top: 75px;
    left: 85px;
    z-index: 9999;
    display: block;
    width: 19px;
    height: 18px;
    background: transparent url(images/midnightlisteners-bgs-matrix.png) no-repeat -60px -44px;
    cursor: pointer;
    opacity: 0;
    display: block;
}

.more-info:hover{

}​

编辑：如何使代码更简单而不是自我重复。如何实现 var 元素

$(".play").mouseenter(function(){
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '1'
            }, 800, 'linear');
        $(".more-info").mouseenter(function(){
            $(this).stop(true).animate({
                opacity: '1'
                }, 800, 'linear');
        });
        $(".the-tooltip-wrap").mouseenter(function(){
            $(this).prev(".more-info").stop(true).animate({
                opacity: '1'
                }, 800, 'linear');
        });
    });
    $(".play").mouseleave(function(){
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '0'
            }, 1000, 'linear');
        $(".more-info").mouseleave(function(){
            $(this).stop(true).animate({
                opacity: '0'
                }, 1000, 'linear');
        });
        $(".the-tooltip-wrap").mouseleave(function(){
            $(this).prev(".more-info").stop(true).animate({
                opacity: '0'
                }, 1000, 'linear');
        }); 
    });

​</p>

4

0 回答 0