Jquery 在本例中，最简单的方法是使图像变亮

这里有一个非常简单的问题。我们有一些静态图像，希望使它们更有趣。一件事是用某种类型的覆盖物来减轻它们。例如，将鼠标移到此处的一个图像上： （只是闪电效应）。在jquery中实现这一点最简单的策略是什么

---

thx提前

您只能使用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）中不起作用。

您必须在彼此内部放置两个div

或者，您也可以将图片

放入容器中

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

使用jQuery执行此操作：

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

---

请记住，您应该使用IE的供应商前缀和过滤器，以便在较旧的浏览器中实现这一点。还应确保在非常旧的IE和Safari版本中禁用它。

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

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

供IE8及更高版本使用

---

过滤器：

alpha（不透明度=x）
当应用于元素本身时，不透明度实际上不会使悬停状态“更轻”。你可以做的是负的保证金或z指数一个白色的div覆盖img。这样，悬停时，您将获得真正的白色淡入淡出效果。下面应该作为一个解决方案，即使没有白色背景，也可以始终实现“减轻”效果

看到这个了吗

HTML

你可以问比这个更好的问题。。。请在问题中包含一些相关的代码…最简单的方法是编写一些代码来降低图像的不透明度。如果你还没有开始，在这里提问可能不会让你更接近完成它；相反，这是否可以只在css、jquery、plugins中完成，这是一个肯定或否定的问题。。。是的，可以吗？如果我们不提供代码，这将成为一个讨论。thx@KevinB-我的第一个想法是不透明度，但我认为彩色叠加效果更好。不透明度假设白色背景通过工具显示，背景会通过图像显示吗？是的，你只需要将一个grafic保存为.png，这是你想要的透明度。也许你展示的页面上的颜色是白色的，他们是用不透明度思想来实现的。myDiv:hover img{opacity:0.4；}但是它在ie8和早期都不起作用，即使OP将此标记为答案，也应该说你不必“将两个div放在彼此内部”。这个解决方案需要jQuery。在我看来，既然这是CSS和HTML可以以更轻量级的方式执行的标准行为，为什么还要引入javascript呢。对不起，我是一个憎恨者，但我不同意这种方法@蒂梅蓬
img
{
opacity:1.0;
}
img:hover
{
opacity:0.4;
}

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

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;
}