鼠标悬停时，一个图像覆盖另一个图像

one image over the other on mouse hover

本文关键字：图像 一个 覆盖 另一个 悬停 鼠标      更新时间：2023-09-26

我正在开发一个系统，每个用户都可以向系统的其他用户发送个人消息。他可以一次向任意数量的用户发送相同的消息。当他选择多个用户作为目标时，他们的个人资料图片将显示在下面。

我需要的是，每当用户将鼠标悬停在其中一张图片上时，我希望在图片的右上角出现一个小的十字标记，当用户单击该十字标记时，用户应该从目标列表中删除（或任何其他操作-无关紧要）。

我该如何做到这一点？本质上，我需要在个人资料图片上方显示另一张图片（右上角），并为此进行onclick活动。如何做到这一点？我不想使用绝对定位。

@thirtydot我不想使用绝对值定位，因为我有很多这样的照片，我可能有很多网站上的不同位置使用绝对定位意味着使用javascript或jquery来计算悬停的当前位置元素，并使用该位置指定新图像的位置等等。我觉得这一切都很好大而笨重的难道没有更简单的方法吗？

你对为什么现在不想使用绝对定位的解释是完全合理的。

我将向你展示为什么它实际上是"工作的完美工具"。

您没有意识到，您可以在元素的父级上使用position: relative和position: absolute，使absolute元素从父级偏移，而不是从页面偏移，如下所述：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

因此，解决问题的一个好方法是这样的：http://jsfiddle.net/CKJQ3/

以及另一个使用最少JavaScript的版本：http://jsfiddle.net/CKJQ3/1/

CSS:

.imageContainer {
    position: relative;
    border: 1px dashed #444;
    float: left
}
.imageContainer img {
    display: block
}
.imageContainer .closeButton {
    position: absolute;
    top: -5px;
    right: -5px;
    display: none
}
.imageContainer:hover .closeButton {
    display: block
}

HTML:

<div class="imageContainer">
    <img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG" />
    <a href="#" class="closeButton"><img src="http://dummyimage.com/16x16/f0f/fff&text=+" /></a>
</div>

也许这可以作为一个起点：http://jsfiddle.net/JevbE/

将每个配置文件图片放在position:relative的div中，然后显示position:absolute的嵌套div（这是相对于包含的div的，所以在运行时不需要计算位置）

您可以将配置文件图像作为div的背景，并将按钮放在图像的顶部。不管怎样，你都必须把按钮放好。

您可以将化身设置为"x"的三重视觉，并将其设置为不透明的0.01

$(document).ready(function(){ // This sets the opacity of the x to fade down to 01% when the page loads
    $(".x").fadeTo(1, 0.01);
$(".avatar").hover(function(){
    $(".x").fadeTo("slow", 1.0); // This sets the opacity of x to 100% on hover
}

,function(){
    $(".avatar").fadeTo("slow", 0.01); // This sets the opacity back to 01% on mouseout
});


});

只需设置化身类。化身和'X'元素类.X

希望能有所帮助。

相关文章：