Question

我试图在这个具体问题上找到类似的帖子，但收效甚微，所以希望有人对JQuery有一点经验可以解释我的问题。我目前正在开发一个投资组合网站，即很多图片。当您将鼠标悬停在网站上显示的缩略图之上时，我想制作一个Jquery翻转效果。

效果本身已经实现，但它带来了一种bug。每当我刷新页面或重新查看页面时，每当我的鼠标进入应该触发Jquery效果的图像容器元素时，第一次就不会这样做，但是当我第二次尝试不刷新时页面，效果就在那里。

这是基本的html标记：

<section class="main">
    <div class="wrapper">
        <article class="ImageContainer">
             <a href="#">
                 <img class="back" src="Images/Image1.jpg" alt="Image1"/>
                 <span class="over" style="display: none;">
                     <h2>Title</h2>
                     <p>Watch Project</p>
                 </span>
            </a>
        </article>
    </div>
</section>

因为你可以看到我用“display：none”解决方案解决了我的“翻转效果”，我后来让我的Jquery代码“fadeIn”使其在mouseenter效果上可见。

下面是span class =“over”的CSS，可能没有必要显示但只是加入。

.over {
    width: 300px;
    height: 300px;
    background-image:url(Images/over.png);
    position: absolute;
    top: 0px;
    left 0px;
}

现在我的JQuery

$(document).ready(function(){       
    $(".ImageContainer").mouseenter(function(){
        $(this).children('a').children('span').fadeIn(200);
    });
    $(".ImageContainer").mouseleave(function(){
        $(this).children('a').children('span').fadeOut(200);
    });
});

似乎问题只出现在浏览器中查看时，这个jsfiddle似乎没有问题。我不知道为什么。我对其他文档的所有链接也都有效，我将jquery和jquery UI链接起来。

http://jsfiddle.net/LRdR9/

解决我的问题：我的.over类没有“display：block;”这导致浏览器看不到它。在第二个mouseenter时，它会自动将它放在那里。它让我觉得我还有另外一个问题。

Answer 1

所有内容似乎都适用于jsFiddle。

请注意，在您的jsFiddle中运行代码onload - 确保您在文件本身中执行此操作（确保将jQuery放在正文中，而不是头部）。另外，请确保您在多个浏览器中对其进行测试。

P.S。您可以将代码缩短为以下内容。

$(document).ready(function(){    
   $(document).on('mouseenter mouseleave', '.ImageContainer', function () {
        $('a > span', this).fadeToggle(200);
   });
}):

示例jsFiddle。

mouseenter rollover效果仅在第二次输入后有效

1 个答案: