懸停在圖片的錨圖像

的頂部我有一些HTML/CSS/jQuery的一個問題，當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，同時保持懸停狀態，即使加號圖標。

任何想法？謝謝。

來源

2012-11-20 mousesports

嘗試像這樣 - 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-20 00:34:26

謝謝佐爾坦。我喜歡這個jQuery解決方案。 – mousesports

不客氣 –

，那是因爲你的加號圖標是.project-thumbnail，其觸發的鼠標離開外面。嘗試把它放在.project-thumbnail裏面，然後調整你的js和css。

像這樣http://jsfiddle.net/bondythegreat/Em4wh/

來源

2012-11-20 00:31:03 bondythegreat

感謝@bondy最棒的。將錨移回到'.project-thumbnail'似乎會導致CSS出現問題。不是在這種情況下，但我有其他我沒有發佈的東西搞砸了。感謝您的解決方案，它也可以。 – mousesports

我認爲問題是，當你將鼠標移動到觸發其隱藏的加號圖標，這反過來又觸發project-thumbnail鼠標再次輸入處理您的project-thumbnail鼠標離開處理程序中的加號圖標它顯示加號圖標 - 但是你的鼠標已經超過加號，所以再次觸發鼠標離開處理程序等等等等。當然，口吃是因爲動畫開始和反覆停止。

也許你可以修改你的HTML結構把project-thumbnail DIV中的加鏈接 - bondythegreat的有你覆蓋那裏。

或者你可以嘗試這樣的黑客：

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-20 00:34:17 nnnnnn

欣賞解決方案 - 儘管有點冒險，但它的工作原理！：p – mousesports

懸停在圖片的錨圖像

回答

相關問題