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>

キャプションは display: none; に設定されています。top: -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

ありがとう、リターンボイド。あなたの提案は、多かれ少なかれ私がやったことです--私は上記の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 に答える
0

たぶん、このソリューションは有用です：

$(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 に答える