如何实现将鼠标悬停在图像效果上？

我想要在wookmark上看到的图像效果达到同样的鼠标，我假设这是用一些jQuery和CSS魔术完成的。有没有什么好的教程可以说明这是如何完成的？如何实现将鼠标悬停在图像效果上？

翻翻jQuery的文档似乎我需要使用悬停，像这样：

$("li.preview").hover(function(e){ 
    // show and hide come css magic 
});

不知道哪里有它的CSS部分去...

来源

2012-08-06 Paul

看起来在家种植。 Modernizr和http://www.wookmark.com/js/tiles.js。看看qtip2或更好的东西，因为我看到沉重的iPad支持 – mplungjan 2012-08-06 19:56:52

您可以创建一个在你的图像（S），并且包装内，你可以有你想要出现/消失悬停按钮的包装。然后只需在图像悬停时显示/隐藏这些按钮。

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来淡入/淡出选项元素：

.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 property is like：

.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/

来源

2012-08-06 19:55:52 Jasper

+1。我不知道CSS的“过渡”属性。 FWIW，这个仅支持CSS的解决方案在IE 7中不起作用。另外，JS版本*应该可以在IE 7中工作，但抱怨'控制台'未定义。有什么想法吗？ – ErikE 2012-08-06 20:12:12

@ErikE它适用于IE7，但您可能需要将'* display：inline'添加到'.image-wrapper' CSS规则中，以便与IE7糟糕的CSS渲染兼容。 – Jasper 2012-08-06 20:14:32

非常感谢这个伟大的例子。 CSS选项好像会起作用。 – Paul 2012-08-06 20:18:40

你可以用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>

Demo

来源

2012-08-06 19:55:35

如何实现将鼠标悬停在图像效果上？

回答

相关问题