jQuery CSS 使用 javascript 事件处理程序将图像放在图像上

Question

我正在尝试制作一个图像画廊，您可以在其中使用图像的拇指，然后当您将鼠标悬停在图像上时，一个红色的 X 会出现在拇指的右下方。

如果您单击拇指本身，它将打开一个灯箱画廊。如果单击红色 X 图像，它将删除该图像。

无论如何，我现在的 CSS 设置相当好。它将红色 X 放在图像上的正确位置，我将它的 z 设置为 20000。

问题是无论我是点击拇指还是点击 x 灯箱都会触发。

这是我们正在寻找的:

一些 JS:

$('#PicturePreview a').lightBox();
$(document).delegate('.delete_img', 'click', function() {
    alert("You dirty rat");
            // I can't get it to get in here....
});

一些CSS:

.delete_img {
left: 0;
position: absolute;
top: 80px;
text-align: right;
width: 150px;
z-index: 2000000;
}
#PicturePreview img {
max-height: 120px;
max-width: 153px;
}

和 HTML:

<div id="PicturePreview">
<table>
        <tr>
            <td>
        <div class='preview_image'>
        <a href='../../pic.jpg' alt='' />
                        <img src='../../pic.jpg' alt='' />
            <div class='delete_img'>
                            <img src='assets/common/red_x.png' alt='' />
                        </div>
        </a>
                </div>
    </td>
        </tr>
    </table>
</div>

Answer 1

父 anchor 正在覆盖事件；尝试像这样将 delete_img div 移出它:

<div class='preview_image'>
    <div class='delete_img'>
        <img src='assets/common/red_x.png' alt='' />
    </div>    
    <a href='../../pic.jpg' alt=''>
        <img src='../../pic.jpg' alt='' />
    </a>
</div>

根据您的 CSS，您可能需要将 preview_image div 设置为 position: relative 以使红色 x 与预览图像对齐。