Question

每次鼠标悬停在photoCaption的图像上时，我想显示z-index == 19 div。但是我开发的代码有两个问题。

在所有图片上显示div photoCaption
当鼠标停用且鼠标重新显示时，div不再显示。

我做错了什么？第二行的javascript代码可能是错误的，因为它始终是真的。

Here是代码

Answer 1

第一个问题，你的条件statmenet应该是：

if($(this).css('z-index') == 19) { // you're using $('img') which returns all img elements and then you're setting the z-index to 19 for all of them.

但z-index除非您auto元素添加position，否则img会显示img{ position: relative; }。所以添加：

display

您还将display设置为display: 'block', // could also be inline, inline-block etc，这是不正确的，应该是：

{{1}}

这里的工作示例：http://jsfiddle.net/mgJLp/5/

Answer 2

要解决仅显示一次的标题的问题，请将鼠标悬停事件更改为：

$('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
        });
    }
});

display属性设置为block以显示标题div。

至于仅在z-index为19的图像上显示标题，使用z-index作为区分元素的手段并不理想。如果可能的话，使用类选择器会更容易。

就目前而言，使用您当前的javascript，您正在设置z-index而不是检查它。查看$('img').css('z-index') == '19'

上方的新条件

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'
    });
});

Fiddle

Answer 4

$('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'
    });
})
});

DEMO

根据z-index值</div>显示<div>

4 个答案: