1

我试图在这个特定问题上找到类似的帖子，但收效甚微，因此希望对 JQuery 更有经验的人可以阐明我的问题。我目前在一个投资组合网站上工作，即很多图像。当您将鼠标悬停在网站上显示的缩略图之一上方时，我想制作 Jquery 翻转效果。

效果本身已经实现，但它带有一种错误。每当我刷新页面或重新查看页面时，每当我的鼠标进入应该触发 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>

如您所见，我已经使用“显示：无”解决方案解决了我的“翻转效果”，后来我让我的 Jquery 代码“淡入”以使其在 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 类没有“显示：块；” 这导致浏览器看不到它。在第二次 mouseenter 时，它会自动将其放在那里。它欺骗了我，以为我还有另一个问题。

4

1 回答 1

0

一切似乎都在jsFiddle工作。

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

Ps 您可以将代码缩短为以下内容。

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

示例jsFiddle。

于 2013-03-28T15:39:24.020 回答