2

每次photoCaption鼠标悬停在带有z-index == 19.
但是我开发的代码有两个问题。

  1. photoCaption它在所有图像上 显示 div
  2. 当鼠标离开，鼠标再次结束时，div不再显示。

我做错了什么？javascript 代码的第二行可能是错误的，因为它总是正确的。

这是代码

4

4 回答 4

3

第一个问题，您的条件状态应该是：

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会阅读。所以添加：autopositionimg

img{
    position: relative;
}

您还设置display为display，这是不正确的，它应该是：

display: 'block', // could also be inline, inline-block etc

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

于 2013-06-06T10:51:41.487 回答
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
        });
    }
});

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

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

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

于 2013-06-06T10:50:04.267 回答
0

解决你的两个问题..

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

小提琴

于 2013-06-06T10:53:43.490 回答
0 
$('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'
    });
})
});

演示

于 2013-06-06T10:55:18.673 回答