0

我有一些带有隐藏标题的旋转图像，当有人悬停时我想用 jQuery 公开它们。每个图像+标题是这样的：

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

标题设置为显示：无；并放置在顶部的图像顶部：-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 上的悬停效果正在发挥作用（即，标题位于图像顶部，因此它会在悬停和取消悬停时触发，从而闪烁）。

我已经尝试了很多东西，但没有工作。如果我在标题文本上，有什么想法可以阻止悬停事件触发吗？谢谢。

4

2 回答 2

0

也许这个解决方案可以是 util：

$(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}
于 2010-01-14T18:19:33.200 回答
0

谢谢，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");

});
于 2010-01-14T20:43:25.317 回答