0

最近、画像にカーソルを合わせると、画像の中央にaltタグが表示されるようにするための質問をしました。ありがたいことに、次のコードが提供されました。

<script type="text/javascript">
    $(document).ready(function () { 
        $('#illustration-content ul li img').hover(
            function(){
                $(this).css('opacity','.2');
                var a = $(this).attr('alt');
                $(this).parent().append('<div class="title">' + a + '</div>');
            },
            function(){
                $(this).css('opacity','1');
                $(this).next().remove('.title');
            }
        );
    });
</script>

これはうまくいきます。

私が今抱えている問題は、カーソルが画像の中央にあるときにaltタグの上に移動すると、効果全体が消えてしまうことです。カーソルが画像から離れたときにのみ効果が消えるようにしたい。

これが私が使用しているcssであり、htmlは画像の単純なULリストです。

#illustration-content ul li img{
    position: relative;
}

.title{
    position: absolute;
    z-index: 1000;
    width: 100px;
    margin: 80px 0px 0px -150px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
}

インラインブロックを使用した場合と使用しない場合で同じ結果を試しましたが、タグの位置を変える必要があります。

なぜこれが起こっているのか考えはありますか？

問題の例を次に示します。http：//jsfiddle.net/ysSJu/

どんなサポートにも感謝します。

4

3 に答える 3

2

説明

imgタイトルにカーソルを合わせると効果が消えるのは、要素のみのイベントがあるためです。
代わりに、イベントを全体liに「リンク」して、ユーザーがリスト項目にカーソルを合わせたときに、を含む要素全体div.titleが影響を受けるようにする必要があります。

デモンストレーション

上の画像では、それがどのように機能するかを見ることができます。

現在、緑色の に対応するイベントにリンクされていますimg。これはdiv.title、黄色の が「外側」の要素として扱われることを意味し (は要素div.titleの内側にないためimg)、したがって、mouseleaveにカーソルを合わせるとイベントがトリガーされますdiv.title。
イベントを 、赤にリンクすると、イベントは緑と黄色liの赤い境界線内のすべてを包含します。

また、画像に関連してタイトルを配置できるように、liブロックを扱う必要があります。display: inline-block

つまり、基本的に、私が言おうとしているのは、代わりに

$('#illustration-content ul li img');

やったほうがいい

$('#illustration-content ul li');

次に、それに応じてコードを調整します。

解決

これが実用的なソリューションです。

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);

    $this.mouseenter(function(){
        var eTitle = $('<div class="title">' + eImg .attr('alt') + '</div>');
        eImg.css('opacity','.1');
        $this.prepend(eTitle);
    }).mouseleave(function(){
        var eTitle = $("div.title", $this);
        eImg.css('opacity','1');
        eTitle.remove('.title');
    });
});

代替ソリューション

ごとに div を作成して破棄する代わりに、 でmouseenter/mouseleave1 回だけ div を生成しdocument.ready()、ユーザーがそれらの上にカーソルを置いたときに表示/非表示にする方がよい場合があります。
実際には、全体的なパフォーマンスが向上するはずです。

これが例です。

デフォルトでは、.titleには style プロパティがありますdisplay: none。

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);
    var eTitle = $('<div class="title">' + eImg.attr('alt') + '</div>');

    $this.prepend(eTitle)
        .mouseenter(function(){
            eImg.css('opacity','.1');
            eTitle.show();
        })
        .mouseleave(function(){
            eImg.css('opacity','1');
            eTitle.hide();
        });
});

知っておくと便利な追加情報

の代わりにmouseenterandを使用したことに注意してください。Hover は、実際にはこれら 2 つのイベントを組み合わせた省略形の機能です。一般に前者の方が読みやすく、信頼性が高いため、私は前者を使用する傾向があります。mouseleavehover

また、両方のソリューションで関数を使用したことにも注意してください.each()。要素を変数に割り当てることにより、JQuery はノードを参照するたびにノードを見つけるために余分な処理を浪費する必要がなくなります。より効率的にします。

このように、セレクターの 2 番目のパラメーターとして要素を渡すことにより、

$(".title", parent_element).css(...);

.children()やのような関数を使用する必要はありません.next()。また、非常に効率的です。

あなたはpositioning に 苦労したと言いました。これを見てください。物事が明確になるかもしれません。

ふぅ、これらの長い投稿は読みにくいですよね？さて、必要なものはすべて網羅できたと思います。

頑張って、コーディングをお楽しみください! :)

于 2011-12-30T23:48:01.393 に答える
1

event.relatedTargetプロパティをチェックして、関数内の.title要素であるかどうかを確認できます。mouseout

            function(event){
                if (!$(event.relatedTarget).hasClass('title')) {
                    $(this).css('opacity','1').siblings().remove();
                }
            }

デモ: http://jsfiddle.net/ysSJu/1/

また、 から 2 つの jQuery オブジェクトを作成する必要がないように、関数呼び出しを連鎖させていることにも注目してくださいthis。

アップデート

ある画像から別の画像にカーソルを移動すると.title、前の画像から削除されるはずの要素が削除されないことに気付きました。img要素をリセットして余分な要素opacityをing することで、これを修正できます。.remove().title

var $images = $('#illustration-content ul li img');
$images.hover(
    function(){
        $images.css('opacity', 1).siblings().remove('.title');
        var $this = $(this),
            a     = $this.attr('alt');
        $this.css('opacity','.2').parent().append('<span class="title">' + a + '</span>');
    },
    function(event){
        if (!$(event.relatedTarget).hasClass('title')) {
            $(this).css('opacity','1').siblings().remove('.title');
        }
    }
);

ここにデモがあります：http://jsfiddle.net/ysSJu/3/

于 2011-12-30T23:35:32.373 に答える
0

変更し.hoverます。と. .mouseenter_.mouseleave

だから基本的に...

var images = $('#illustration-content ul li img');
images.mouseenter(function(){
    $(this).css('opacity','.2');
    var a = $(this).attr('alt');
    $(this).parent().append('<div class="title">' + a + '</div>');
});
images.mouseleave(function(){
    $(this).css('opacity','1');
    $(this).next().remove('.title');
 });

あなたが指摘したように、その理由は、altの上にカーソルを合わせる<div>と、外側のimgでホバーイベントが発生しなくなります。ただし、 alt を使用しmouseenterてmouseleaveホバリングしても、 の は<div>起動mouseleaveしません<img>。

于 2011-12-30T23:30:15.610 に答える