одно изображение поверх другого при наведении мыши

Question

Я занимаюсь разработкой системы, в которой каждый пользователь может отправлять личные сообщения другим пользователям системы.Он может отправлять одно и то же сообщение любому количеству пользователей одновременно.Когда он выбирает более одного пользователя в качестве цели, его изображения профиля отображаются ниже.

Что мне нужно, так это то, что когда пользователь наводит указатель мыши на одно из этих изображений, я хочу, чтобы на нем появлялась небольшая крестовая метка.правый верхний угол изображения, и когда пользователь щелкает крестиком, пользователь должен быть удален из целевого списка (или любое другое действие - не имеет значения).

Как мне этого добиться?По сути, мне нужно, чтобы над изображением профиля (правый верхний угол) было еще одно изображение, и для этого должно быть событие onclick.Как этого достичь?Я не хочу использовать абсолютное позиционирование.

Answer 1

@ тридцать я не хочу использовать абсолют позиционирование, потому что у меня много таких фотографии, и я могу иметь их на многих разные места на сайте, используя абсолютное позиционирование будет означать использование Javascript или JQuery для расчета текущее положение зависшего элемент и используя эту позицию для назначить позицию нового изображения и так далее. Я думаю, что это все довольно громоздкий. Есть ли более простой способ?

Ваше объяснение того, почему вы не хотите использовать абсолютное позиционирование, теперь имеет смысл.

Я собираюсь показать вам, почему это на самом деле «идеальный инструмент для работы».

Вам неизвестен тот факт, что вы можете использовать position: relative для родителя элемента с position: absolute, чтобы сместить элемент absolute от родителя, а не от страницы, как объяснено здесь:

http://css -tricks.com / абсолютное позиционирование внутри--относительного позиционирования /

Итак, хорошим решением вашей проблемы является что-то вроде этого: 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 2

поместите каждое изображение профиля в div с позицией: относительный, а затем покажите вложенный div с позицией: абсолютный (который является относительным к содержащемуся div, поэтому вам не нужно вычислять позицию во время выполнения)

Answer 3

возможно, это может помочь в качестве отправной точки: http://jsfiddle.net/JevbE/

Answer 4

Вы можете использовать изображение профиля в качестве фона для элемента div и поместить кнопки сверху изображения. Вам нужно будет расположить кнопки независимо от того, что.

Answer 5

Вы можете сделать аватар для triiger видимости '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

надеюсь, это поможет.