Question

这是一个非常简单的问题。我们有一些静态图像，并希望使它们更有趣。有一种情况是lighten他们使用某种类型的叠加层。例如，将鼠标悬停在其中一个图像上： http://www.cnn.com/interactive/2013/02/world/pope-contenders/index.html（只是闪电效果）。在jquery中最好的策略是什么？

事先提前

Answer 1

你只能用css

来做

.myDiv:hover {
    background-image:url(/path/to/transparent.png); /* width 1px, height 1px, the color and opacity you want*/
    background-repeat:repeat;
}

不透明度的问题在于它不会在ie7中工作（也可能是ie8）

Answer 2

你必须把两个div放在一起。

或者您也可以在容器中放置图片<img/>。

<div class="img-container">
   <div class="img-overlay"></div>
</div>

这里是你需要的css：（我假设您的所有图像都具有与您发布的链接相同的高度和宽度。或者您可以设置相对（％）css属性。）

.img-container {
  position: relative;
  width: 100px; /* your images widths */
  height: 200px; /* your images heights */
  background: url('path/to/your/image.png');
}

.img-overlay {
  position: absolute;
  z-index: 5; /* it has just to be one more than the one above */
  width: 100px; /* your images widths */
  height: 200px; /* your images heights */
  display: none;
  background-color: '#333333'; /* your color of choice */
  opacity: 0.8;
}

使用jQuery：

$('.img-container').mouseEnter(function() {
    $(this).children('.img-overlay').fadeIn('fast');
}).mouseLeave(function() {
    $(this).children('.img-overlay').fadeOut('fast');    
});

请记住，您应该使用供应商前缀并过滤IE，以便在旧版浏览器中使用。确保也为非常旧的IE和Safari版本停用它。

Answer 3

使用css本身可以轻松实现这种效果。试试这块css。

img
{
opacity:1.0;
}
img:hover
{
opacity:0.4;
}

对于IE8及以后的使用滤波器：alpha(opacity=x);

Answer 4

当应用于元素本身时，不透明度实际上不会使悬停状态“更轻”。你可以做的是负边距或z-index白色div来覆盖img。通过这种方式，您可以在悬停时真正获得白色渐变。下面应该可以作为一个解决方案，即使没有白色bg也能始终达到“减轻”的效果。

查看此工作fiddle

HTML

<h3>Just Opacity</h3>
<a href="#" class="one"><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" /></a>

<h3>With an overlay</h3>
<a href="#" class="two"><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" /></a>
<a class="three">&nbsp;</a>

CSS

body {
    background: #262626;
}
h3 {
    color: white;
}
a:hover.one {
    opacity: .5;
}
.two {

}
a.three {
    width: 252px;
    height: 250px;
    background: #FFF;
    display: block;
    margin: -254px 0 0 0;
    position: relative;  
    opacity: .0;
}
a:hover.three {
    opacity: .7;
}

在这个例子中，最简单的方法是减轻图像的亮度

4 个答案: