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

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

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

---

我如何做到这一点？本质上，我需要在配置文件图片（右上角）上方显示另一张图片，并为此设置onclick事件。如何做到这一点？我不想使用绝对定位。

您可以将配置文件图像作为div上的背景，并将按钮放在图像顶部。无论发生什么情况，您都必须定位按钮。

您可以将配置文件图像作为div的背景，并将按钮放在图像的顶部。无论发生什么情况，您都必须定位按钮。

将每个配置文件图片放在一个带有position:relative的div中，然后显示带有position:absolute的嵌套div（它相对于包含的div，因此您不需要在运行时计算位置）

将每个配置文件图片放在一个带有position:relative的div中，然后显示带有position:absolute的嵌套div（该div相对于包含的div，因此您不需要在运行时计算位置）

这可能有助于作为一个起点：

这可能有助于作为一个起点：

您可以使虚拟形象在虚拟形象上方的“x”的可视性增加，并设置为Opacice 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

---

希望有帮助。

您可以将“x”定位在头像上方，并设置为Opacice 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

希望能有帮助

---

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

你对为什么现在不想使用绝对定位的解释很有道理

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

您不知道这样一个事实，即您可以在元素的父元素上使用

position:relative

，使用

position:absolute

使

absolute

元素从父元素偏移，而不是从页面偏移，如下所述：

因此，解决问题的好办法是：

另一个版本使用最少的JavaScript：

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
}

<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>

HTML:

.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
}

<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>

---

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

你对为什么现在不想使用绝对定位的解释很有道理

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

您不知道这样一个事实，即您可以在元素的父元素上使用

position:relative

，使用

position:absolute

使

absolute

元素从父元素偏移，而不是从页面偏移，如下所述：

因此，解决问题的好办法是：

另一个版本使用最少的JavaScript：

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
}

<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>

HTML:

.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
}

<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>

我建议您考虑一种实现脚本的方法，尝试一下，拔出一些头发，然后在这里发布不起作用的代码，并提出一个清晰、简短的问题。我无法理解如何处理这一图像而不是另一个想法。。。。。。如果没有绝对定位和z-索引，我如何获得它？

“我不想使用绝对定位”

-为什么？这是完成这项工作的完美工具。@thirtydot我不想使用绝对定位，因为我有很多这样的图片，我可能在网站上的许多不同位置都有它们。使用绝对定位意味着使用javascript或jquery来计算悬停元素的当前位置，并使用该位置来分配悬停元素的位置新形象等等。我认为这一切都很麻烦。难道没有更简单的方法吗？我建议你想一种方法来实现你的脚本，尝试一下，拔出一些头发，然后在这里发布非工作代码，并提出一个清晰、简短的问题。好吧，我无法理解如何处理这一个图像而不是另一个想法。。。。。。如果没有绝对定位和z-索引，我如何获得它？

“我不想使用绝对定位”

-为什么？这是完成这项工作的完美工具。@thirtydot我不想使用绝对定位，因为我有很多这样的图片，我可能在网站上的许多不同位置都有它们。使用绝对定位意味着使用javascript或jquery来计算悬停元素的当前位置，并使用该位置来分配悬停元素的位置新形象等等。我认为这一切都很麻烦。有没有更简单的方法？但我们如何让这些图像彼此重叠？很抱歉，我无法提供JSFIDLE演示，