jquery - 画面Z インデックス値による

Question

photoCaptionマウスが画像の上にあるたびにdivを表示したいz-index == 19.
しかし、私が開発したコードには 2 つの問題があります。

1. photoCaptionすべての画像 にdivを表示します
2. マウスを離し、マウスを再び上に置くと、divは表示されなくなります。

私が間違っていることは何ですか？JavaScript コードの 2 行目は、常に true であるため、おそらく間違っています。

ここにコードがあります

Answer 1

キャプションが 1 回しか表示されない問題を修正するには、マウスオーバー イベントを次のように変更します。

$('img').bind('mousemove', function (e) {
    if ($('img').css('z-index') == '19') {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
});

表示プロパティはblock、キャプション div を表示するように設定されます。

z-index が 19 の画像にのみキャプションを表示する場合、要素を区別する手段として z-index を使用することは理想的ではありません。可能であれば、クラスセレクターを使用する方が簡単です。

現状では、現在の JavaScript では、z-index をチェックするのではなく設定しています。上記の新しい状態を確認してください$('img').css('z-index') == '19'

Answer 2

$('img').bind('mousemove', function (e) {
    if ($(this).css('zIndex', 19)) {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
    $(this).mouseout(function () {
    $('#photoCaption').css({
        display: 'none'
    });
})
});

デモ

Answer 3

両方の問題を解決します..

$('img').css('position','relative');
$('img').on('mousemove', function (e) {
    if ($(this).css('zIndex')=='19') {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
});

$('img').mouseout(function () {
    $('#photoCaption').css({
        display: 'none'
    });
});

フィドル