Question

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

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

我如何实现这一目标？本质上，我需要在个人资料图片（右上角）上方显示另一张图片，并为此进行onclick事件。怎么能实现这一目标？我不想使用绝对定位。

Answer 1

将每个个人资料图片放在一个div中，位置为：relative，然后显示嵌套的div，其位置为：absolute（相对于包含div，因此您不需要在运行时计算位置）

Answer 2

Answer 3

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

Answer 4

您可以将个人资料图片作为div的背景，并将按钮放在图像的顶部。无论如何，你都必须定位按钮。

Answer 5

你可以让化身在化身上设置'x'的可视性并设置为opaicy 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

希望它有所帮助。

鼠标悬停时一个图像叠加在另一个图像上

5 个答案: