Миниатюра наложения с удаляет кнопку с изображением?
Я должен создать удалить кнопку, которые появляются по моим ползункам, когда пользовательское парение, которые отображают с его мышью ссылку, появляется как, удаляют из избранного?
Кто-либо знает, как достигнуть этого?
Примером того, что я хочу, является YouTube быстрая кнопка раскрытия списка, которую Вы находите по ползункам видео.
4 ответа
This will show the icon when you hover the thumbnail, and when you hover the icon on top of that, it will change to a hover icon.
.image-thumb, .image-thumb img {
position:relative;
width:60px;
height:50px;
}
.image-fav {
display:none;
position:absolute;
bottom:0;
left:0;
width:15px;
height:15px;
background-image:url(normal_plus.png);
}
.image-thumb:hover .image-fav {
display:block;
}
.image-fav:hover {
background-image:url(hover_plus.png);
}
<div class="image-thumb">
<img src="thumb.jpg" />
<a href="#" class="image-fav"></a>
</div>
Booya!
Изменено на основе исходного ответа Даниэля Вассалло :
CSS:
.image-thumb {
position: relative;
width: 100px;
height: 100px;
/* apply background-image url inline on the element since it is part of the content */
background: transparent url() no-repeat center center;
}
.image-thumb a {
display: none;
position: absolute;
top: 80px; /* position in bottom right corner, assuming image is 16x16 */
left: 84px;
width: 16px;
height: 16px;
background: transparent url(remove_button.gif) no-repeat 0 0;
}
.image-thumb:hover a {
display: block;
}
HTML (предполагается, что он сгенерирован):
<div class="image-thumb" id="some-unique-thumb-id-1" style="background-image: url(some/image-1.ext)">
<a href="#"></a>
</div>
<div class="image-thumb" id="some-unique-thumb-id-2" style="background-image: url(some/image-2.ext)">
<a href="#"></a>
</div>
....
<div class="image-thumb" id="some-unique-thumb-id-n" style="background-image: url(some/image-n.ext)">
<a href="#"></a>
</div>
JavaScript:
$(function() {
$(".image-thumb a").click(function(e) {
e.preventDefault();
var imageId = $(this).parent().attr("id");
// remove image based on ID.
});
});
Изменить: упрощен HTML.
Вы можете использовать следующий CSS-стиль CSS: HTML: .image-thumb {
position: relative;
width: 100px;
height: 100px;
background-image: url(image_thumb.jpg);
}
.image-fav {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background-image: url(fav_icon.png);
background-position: bottom left;
display: none;
}
.image-fav:hover {
display: block;
}
<div class="image-thumb">
<a class="image-fav" href="javascript:removeFromFav();"></a>
</div>
<div id = "thumbImg">
<img src="thumb.png" onMouseOver="overlayRemove();"
onMouseOut="hideRemove();" />
<img id='removeImg' src='remove.png'
style='position:relative;left:0px;top:0px;z-index:2;display:none' />
</div>
javaScript:
function overlayPic(){
$('removeImg').show();
}
function hideRemove(){
$('removeImg').fadeOut();
}