javascript - 将鼠标悬停在图像顶部的图像 anchor 上时出现 jQuery 问题

Question

我遇到了一些 HTML/CSS/jQuery 的问题。

<div class="project-thumbnail">
        <a href="http://www.google.com/">
            <span class="project-thumbnail-overlay overlay-color">Random Title</span>
            <img width="270" height="180" src="http://i45.tinypic.com/34fgner.jpg" />
        </a>
    </div>
    <div class="zoom-button">
        <a href="http://www.yahoo.com/">
            <img src="http://i46.tinypic.com/wme8ev.png" />
        </a>
    </div>

你可以在这里看到我想要实现的目标:http://jsfiddle.net/NrtvK/1/

基本上，大部分功能都可以使用。但是，当您将鼠标悬停在加号图标 anchor 上时，它会使图像像疯了似的断断续续，并且会删除悬停缩略图状态。

我希望两种效果协同工作，但加号图标指向一个单独的 URL，同时保持悬停状态，即使悬停在它上面也是如此。

有什么想法吗？谢谢。

Answer 1

这是因为您的加号图标在 .project-thumbnail 之外，它在 mouseleave 时触发。尝试将其放入 .project-thumbnail 中，然后调整您的 js 和 css。

像这样的东西 http://jsfiddle.net/bondythegreat/Em4wh/