-2

这里有一个非常简单的问题。我们有一些静态图像，想让它们更有趣。一件事对lighten他们来说是某种类型的覆盖。例如，将鼠标悬停在此处的其中一张图片上： http ://www.cnn.com/interactive/2013/02/world/pope-contenders/index.html （只是灯光效果）。最好在 jquery 中实现这一目标的最简单策略是什么？

提前谢谢

4

4 回答 4

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）

于 2013-03-13T19:11:05.623 回答
1

你必须把两个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 版本停用它。

于 2013-03-13T19:13:02.203 回答
1

这种效果可以通过css本身轻松实现。试试这个css。

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

对于 IE8 及更高版本使用过滤器：alpha(opacity=x);

于 2013-03-13T19:13:14.617 回答
1

当应用于元素本身时，不透明度实际上不会使悬停状态“更轻”。您可以做的是负边距或 z-index 一个白色 div 以覆盖 img。这样，您就可以真正在悬停时获得白色淡入淡出。下面应该作为一个修复，即使没有白色背景，也能始终实现“变亮”效果。

看到这个工作小提琴

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;
}
于 2013-03-13T19:16:03.047 回答