如何在單擊彈出式jQuery中應用懸停效果？

我有一個最初隱藏的容器div直到發生點擊事件。該div包含一個圖像。然而，我想對該圖像應用懸停效果，因爲它被點擊事件覆蓋，所以我無法讓懸停工作。以下是我的代碼。如何在單擊彈出式jQuery中應用懸停效果？

<div class='comment-click'> 
    <div class="comment-product"> 
     <img class="checkered-shirt" src="img/checkered.jpg" /> 
     <div class="comment-hover-popup"> 
      <img class="popup-pic" src="img/Calvin_pic.png" /> 
      <h2 class="hover-title">Nautica</h2> 
      <p class="description">Nautica Men's Hyannis Shoe</p> 
      <input class="buy" id="buy" type="submit" value="Buy" /> 
      <p class="price">$55</p> 
      <p class="hover-comment-command">Comment (2)</p> 
      <img class="plus-icon" src="img/plus-icon.png" /> 
      <img class="check-icon" src="img/check-icon.png" /> 
     </div> 
    </div> 
    <h1>J.Crew</h1> 
    <p class="product-description">J.Crew Plaid Button Down Shirt</p> 
    <img class="comment-x" src="img/x.png" /> 
    <ul> 
     <li> 
      <div class="comment-one"> 
       <img src="img/Calvin_pic.png" /> 
       <p class="product-commenter">Paul Mickan </p> 
       <p class="product-comment">Love this shirt #hipster</p> 
      </div> 
     </li> 
     <li> 
      <div class="comment-two"> 
       <img src="img/Calvin_pic.png" /> 
       <p class="product-commenter">Calvin Hemington </p> 
       <input class="product-comment" type="text" name="Add a comment..." onfocus="if (this.value=='Add a comment...') this.value = ''" value="Add a comment..." /></a> 
      <input class="comment-post" type="submit" value="Post" /> 
      </div> 
     </li> 
    </ul> 
</div>

jQuery的

$('.hover-comment-command').click(function() { 
    $('.comment-click').fadeIn(); 
    $('.comment-hover-popup').hide(); 
}); 

$('.comment-x').click(function() { 
    $(".comment-click").fadeOut(); 
}); 

$(".checkered-shirt").hover(function() { 
    $(this).find('.comment-hover-popup').fadeIn(300); 
}, function() { 
    $(this).find('.comment-hover-popup').hide(); 
});

來源

2015-01-05 Calvin Hemington

你缺少一個右'div'標記爲'的.comment-click'，使得它不清楚這裏發生了什麼的lings。看起來，單擊某個元素會使其父項出現，這看起來很奇怪。 – isherwood

使用$(this).siblings()而不是$(this).find()在hover()功能

$(".checkered-shirt").hover(function() { 
    $(this).siblings('.comment-hover-popup').fadeIn(300); 
}, function() { 
    $(this).siblings('.comment-hover-popup').hide(); 
});

find()是匹配的元素

siblings()是，好了，氏族decendants匹配的元素

See the docs here

來源

2015-01-05 21:19:37

謝謝你的工作！除了懸停只有當我將鼠標放在圖像上並將其留在那裏時才起作用。每當我在鼠標懸停區域內移動鼠標時，懸停效果就會打開和關閉。有什麼想法爲什麼？ –

@CalvinHemington - 我無法用代碼重現那種行爲。您使用的是什麼版本的jQuery，以及您使用的是哪種瀏覽器？ –

如何在單擊彈出式jQuery中應用懸停效果？

回答

相關問題