<body>
<div id="content" >
<img id="Image1" src = "img.png" />
</div>
</body>
Я хочу показать близкое изображение в правом верхнем углу, когда навешивается над другим изображением (Image1). Как это сделать в css, также я использую jquery.Отображение макроса при зависании
дают близкое изображение Z-индекс выше, чем изображение вы зависший над и расположить близко образ абсолютного затем поместить его в правильном положении с непрозрачностью 0, то с помощью JQuery для анимации непрозрачности при наведении курсора мыши
Вы можете сделать это в чистом CSS, однако, скорее всего, не работает в IE7 или ниже
<body>
<div id="content">
<img id="Image1" src="img.png" />
<img class="close" src="close.png" />
</div>
</body>
CSS Метод:
#content { position: relative; }
#content .close {
display: none;
position: absolute;
top: 0;
right: 0;
}
#content:hover .close { display: block; }
ОБНОВЛЕНО
Чтобы показать замирание в/из эффекта для кнопки закрытия, вы должны будете использовать JQuery:
$("#content").hover(function() {
$(".close", $(this)).stop(true).fadeIn();
},
function() {
$(".close", $(this)).stop(true).fadeOut();
]);
@ user1184100 true, но если вы хотите эффект затухания, вам придется использовать jquery. – zero
Я думал, что изображение1 было изображением, которому нужно было закрыть изображение над ним:/ –
он хочет, чтобы над этим изображением плакал изображение ДРУГОГО, в противном случае это решение было бы окончательно лучшим :) – giorgio
сначала сделать макет, показывающий ваше близкое изображение в правом верхнем углу , Когда вам удалось это, использовать JQuery, чтобы показать его на парении:
$('#Image1').on('mouseenter', function() { $('#closeImg').show(); });
размещая близкое изображение можно сделать что-то вроде этого:
<div class="img-container">
<div class="close-img"><img src="..." /></div>
<img src="..." />
</div>
CSS:
.img-container { position: relative; }
.close-img { position: absolute; top: 0; right: 0; z-index: 99; }
- - edit: используйте приведенный выше пример jquery, если вы хотите получить некоторые эффекты, в противном случае используйте чистое решение css (.img-container:hover .close-img { display: block }), предоставленное другими
Вам нужно будет создать закрытое изображение. Затем вам нужно стиль #content DIV и добавить зависать в #content следующим образом:
<div id="content" >
<img id="Image1" src = "img.png" />
<img id="close" src="/path/to/close/image/close.png" />
</div>
#content{
position:relative;
z-index:0;
}
.close{
position:absolute;
right:-10px; top:-10px; /* Will place the close image in the top right edge of the image */
display:none;
z-index:1;
}
#content:hover .close{
display:block;
}
Использование JQuery, вы можете использовать:
$(document).ready(function(){
$('#content').hover(function(){
$(this).children('.close').show();
}, function(){
$(this).children('.close').hide();
}
});
Закрыть изображение ???? – Hadas
Я имею в виду пользовательское изображение отмены ... – user1184100
$ ('img'). Hover (function() {$ (this) .prepend ('
')}). Blur (function() {$ ('. Close').Удалить()}); –
ggzone