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/

基本上，大多数功能都有效。但是，当您将鼠标悬停在加号图标锚点上时，会使图像像疯狂一样口吃，并且会删除悬停的缩略图状态。

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

有什么想法吗？感谢。

Answer 1

这是因为你的加号图标在.project-thumbnail之外，它在mouseleave上触发。尝试把它放在.project-thumbnail里面并在那之后调整你的js和css。

像这样http://jsfiddle.net/bondythegreat/Em4wh/

Answer 2

尝试这样 - DEMO

$('.portfolio-project').mouseenter(function(e) {    
    $(this).find('.project-thumbnail').children('a')
        .children('img').stop().animate({ height: imgHeight, left: '0', top: '0', width: imgWidth}, 100).end()
        .children('span').stop().fadeIn(200);
    $(this).find('.project-thumbnail').next('.zoom-button').show();
}).mouseleave(function(e) {
    $(this).find('.project-thumbnail').children('a')
        .children('img').stop().animate({ height: imgHeight + 33, left: '-20', top: '-20', width: imgWidth + 50}, 100).end()
        .children('span').stop().fadeOut(200);
    $(this).find('.project-thumbnail').next('.zoom-button').hide();
});

Answer 3

我认为问题在于当你将鼠标移动到加号图标上时会触发你的project-thumbnail鼠标离开处理程序，该处理程序会隐藏加号图标，这又会触发project-thumbnail鼠标再次输入处理程序显示加号图标 - 但你的鼠标已经超过加号，以便再次触发鼠标离开处理程序等等。当然，口吃是因为动画重复开始和停止。

你也许可以修改你的html结构，将加号链接放在project-thumbnail div中 - 你已经覆盖了那个地方。

或者你可以尝试这样的黑客攻击：

var projectThumbnail = $('.project-thumbnail'),
        imgWidth = projectThumbnail.width(),
        imgHeight = projectThumbnail.height(),
        timeoutID; // <-- new variable

    projectThumbnail.mouseenter(function(e) {    
        $(this).children('a').children('img').stop().animate({ height: imgHeight, left: '0', top: '0', width: imgWidth}, 100);
        $(this).children('a').children('span').stop().fadeIn(200);
        $(this).next('.zoom-button').show();
    }).mouseleave(function(e) {
        // move original functionality into a timeout, saving a reference
        // to this for use within the timeout
        var $this = $(this);
        timeoutID = setTimeout(function() {
           $this.children('a').children('img').stop().animate({ height: imgHeight + 33, left: '-20', top: '-20', width: imgWidth + 50}, 100);
           $this.children('a').children('span').stop().fadeOut(200);
           $this.next('.zoom-button').hide();
        }, 5);
    });

    // cancel the timeout when entering the plus button
    $(".zoom-button").mouseenter(function(e) {
        clearTimeout(timeoutID);
    });

演示：http://jsfiddle.net/NrtvK/2/

（我知道这很狡猾，但我出于好奇而尝试了它，当它发挥作用时，我想我也可以发布它。）

将鼠标悬停在图像顶部的图像锚点上时出现jQuery问题

3 个答案: