3

我遇到了一些 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，同时保持悬停状态，即使悬停在它上面也是如此。

有任何想法吗？谢谢。

4

3 回答 3

2

这是因为您的加号图标.project-thumbnail在鼠标离开时触发的外部。试着把它放在里面.project-thumbnail然后调整你的js和css。

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

于 2012-11-20T00:31:03.813 回答
1

像这样试试 - 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();
});​
于 2012-11-20T00:34:26.487 回答
0

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

您也许可以修改您的 html 结构，将加号链接放在project-thumbnaildiv 内 - bondythegreat's 已经覆盖了那里。

或者你可以尝试这样的破解：

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/

（我知道这很狡猾，但我出于好奇尝试了它，当它起作用时，我想我不妨发布它。）

于 2012-11-20T00:34:17.537 回答