Question

我有一些带有隐藏字幕的旋转图像，当有人盘旋时，我想用jQuery公开。每个图片+标题都是这样的：

<img src="images/picture.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>

标题设置为display：none;并放在顶部的图像顶部：-75px。交互的jQuery是这样的：

$("img[id*=feature-]").hover(function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').addClass("showCaption");
    },
    function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').removeClass("showCaption");
});

它工作正常，但是，如果你鼠标悬停在标题本身上，它会闪烁，因为img上的悬停效果正在发挥作用（即标题位于图像的顶部，因此它会为悬停和取消悬停而触发，因此闪烁）。

我尝试了很多东西，但没有工作。如果我在标题文本上有任何阻止事件悬停的想法吗？感谢。

Answer 1

也许这个解决方案可以使用：

$(document).ready(function(){
            $(".img-caption").hover(
                function(){
                    $(this).find('p').show();
                },          
                function(){
                    $(this).find('p').hide();
                }
            );

        });

html看起来像：

<div class="img-caption">
<img src="http://www.bertellibici.com/products/112/images/bb_DSC_6763.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>
</div>

和css：

.img-caption{float: left;position:relative}
.feature_caption{display: none;position: absolute;top: 0px;left: 0px}

Answer 2

谢谢，Returnvoid。你的建议更多/更少我最终做的 - 我需要在上面的div上工作 - doh。因为我正在旋转一些图像，所以我需要附加和分离一个表示正在处理哪个图像的类。这是我的代码，以防这对其他任何人都有帮助。

// Handle click of featured items in sidebar

$("li[id*=feature-]").click(function(event) {
    // determine the feature_id
    var feature_id = $(this).attr("id").split("-");

    // remove the class indicating what feature is selected
    $("#imagespot").removeClass();
    // add class indicating the current feature
    $("#imagespot").addClass("feature-" + feature_id[1]);
    // hide all feature images
    $("img[id*=feature-]").hide();
    // remove the active class from all list items, and attach to current one
    $("li[id*=feature-]").removeClass("active");
    $(this).addClass("active");
    // show the selected image
    $('img[id=feature-' + feature_id[1] + '-image]').animate({opacity:"show"}, "medium");

});

// Handle display of captions

$("#imagespot").hover(function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption appear on mouseover
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"show"}, "fast");

    },
    function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption disappear on mouseout
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"hide"}, "slow");

});

jQuery Hover Flickers for Image Caption

2 个答案: