[英]How do I achieve a hover over image effect?
我正在嘗試實現在wookmark上看到的相同的鼠標懸停圖像效果,並且我假設這是通過一些jquery和CSS魔術完成的。 有沒有很好的教程來說明如何做到這一點?
瀏覽jQuery文檔,看來我需要像這樣使用懸停:
$("li.preview").hover(function(e){
// show and hide come css magic
});
不確定CSS的位置在哪里...
您可以在圖像周圍創建包裝器,並且在該包裝器中可以具有要在懸停時顯示/消失的按鈕。 然后,當圖像懸停時,只需顯示/隱藏這些按鈕即可。
HTML-
<span class="image-wrapper">
<span class="image-options"></span>
<img src="..." />
</span>
CSS-
.image-wrapper {
position : relative;
display : inline-block;
}
.image-wrapper .image-options {
position : absolute;
top : 0;
right : 0;
left : 0;
height : 25px;
z-index : 2;
display : none;
}
.image-wrapper:hover .image-options {
display : block;
}
您還可以使用CSS3淡入/淡出options元素:
.image-wrapper {
position : relative;
display : inline-block;
}
.image-wrapper img {
position : relative;
}
.image-wrapper .image-options {
position : absolute;
top : 0;
right : 0;
left : 0;
height : 25px;
z-index : 2;
background : grey;
border : 1px solid black;
opacity : 0;
filter : alpha(opacity=0);
-webkit-transition : opacity 0.25s linear;
-moz-transition : opacity 0.25s linear;
-ms-transition : opacity 0.25s linear;
-o-transition : opacity 0.25s linear;
transition : opacity 0.25s linear;
}
.image-wrapper:hover .image-options {
opacity : 1;
filter : alpha(opacity=100);
}
這是僅使用CSS的演示: http : //jsfiddle.net/fJsJb/
當然,您可以使用JS進行淡入淡出:
$('.image-wrapper').on('mouseenter', function () {
$(this).children('.image-options').stop().fadeIn(250);
}).on('mouseleave', function () {
$(this).children('.image-options').stop().fadeOut(250);
});
這是使用JS的演示: http : //jsfiddle.net/fJsJb/1/
UPDATE
您還可以通過動畫top
屬性來創建幻燈片動畫,如下所示:
.image-wrapper {
position : relative;
display : inline-block;
overflow : hidden;
}
.image-wrapper img {
position : relative;
}
.image-wrapper .image-options {
position : absolute;
top : -25px;
right : 0;
left : 0;
height : 25px;
z-index : 2;
background : grey;
border : 1px solid black;
-webkit-transition : top 0.25s linear;
-moz-transition : top 0.25s linear;
-ms-transition : top 0.25s linear;
-o-transition : top 0.25s linear;
transition : top 0.25s linear;
}
.image-wrapper:hover .image-options {
top : 0;
}
這是一個演示: http : //jsfiddle.net/fJsJb/2/
您可以像這樣使用CSS。
<style>
.imageBox { float:left; width:100px; height:100px; position:relative; background:#000; overflow:hidden; }
.imageBox .imageActions { position:absolute; top:0; left:0; width:100%; height:40px; background:#999; display:none; }
.imageBox img { width:100%; }
.imageBox:hover .imageActions { display:block; }
</style>
<div class="imageBox">
<div class="imageActions "></div>
<img src=".." />
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.