CSS / Javascript показать изображение удалить х при наведении курсора мыши - PullRequest
Новая
       0

CSS / Javascript показать изображение удалить х при наведении курсора мыши

3 голосов
/ 06 сентября 2011

Хотелось бы, чтобы у меня была картинка вроде:

http://www.clker.com/cliparts/q/P/p/c/m/r/gray-x-mark-md.png

Мне бы хотелось, чтобы оно отображалось в правом верхнем углу каждого из моих изображений, в 5 пикселях справа и вверху изображения. У меня есть функции для отображения и скрытия x, а также удаления соответствующих элементов, но я очень плохо позиционирую CSS и не знаю, как заставить его отображаться в верхнем правом углу.

код до сих пор: http://jsfiddle.net/eetwL/

Ответы [ 2 ]

4 голосов
/ 06 сентября 2011

Это должен быть кусок пирога! Вы можете позиционировать этот элемент absolute, что означает, что он не будет перемещаться вместе с макетом, а вместо этого получит свою позицию, основанную на позиции его ближайшего относительного родителя. Давайте представим, что у вас есть «х» в привязке, например: 

<div class="container">
    <a class="close" href="#">x</a>
</div>

Вы хотели бы убедиться, что где-то есть относительный родитель. Это будет отправной точкой, с которой будут применяться ваши правила CSS top и right. Чтобы сделать якорь 5px сверху справа от контейнера ... 

div.container {
    position: relative;
    // possibly important to set width, height, etc.
}

a.close {
    // set size, background image, etc.
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
}
2 голосов
/ 06 сентября 2011

Это один из относительно простых способов сделать это. По сути, вы можете установить элемент на position:absolute и контролировать его верхнюю, правую, нижнюю и левую позиции, если его родительский элемент равен position:relative;. 

<div class="img">
    <img src="whatever.jpg"/>

    <img class="xmark" src="gra-x-mark-md.png"/>
</div>

<style>
.img{
    position:relative;
}
.img .xmark{
    position:absolute;
    top:5px;
    right:5px;
}
</style>
...