Javascript 如何在点击弹出jQuery中应用悬停效果？

我有一个容器div，它在单击事件发生之前是隐藏的。div包含一个图像。我想在该图像上应用悬停效果，但是，我无法使悬停生效，因为它被单击事件覆盖。下面是我的代码

<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>

在

悬停（）函数中使用
$（this）.sides（）
而不是
$（this）.find（）

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

find（）
用于匹配元素的decentant

sides（）
用于匹配元素的同级

您缺少了
的结束
div
标记。请单击注释
，不清楚此处发生了什么。似乎单击某个元素会使其父元素出现，这似乎很奇怪。谢谢，这很有效！除非只有当我将鼠标放在图像上并将其保留在那里时，悬停才有效。每当我在鼠标悬停区域内移动鼠标时，鼠标悬停效果就会时断时续地跳动。你知道为什么吗？@CalvinHemington-我不能用代码重现那种行为。您使用的是什么版本的jQuery以及您使用的是什么浏览器？
$(".checkered-shirt").hover(function () {
    $(this).siblings('.comment-hover-popup').fadeIn(300);
}, function () {
    $(this).siblings('.comment-hover-popup').hide();
});