Javascript Jquery将css样式应用于具有特定类的所有元素（鼠标悬停图像除外）

我该怎么做？我有一个div的列表：

<div id="portfolio">
    <div id="portfolio_img1" class="portfolio_img"></div>
    <div id="portfolio_img2" class="portfolio_img"></div>
    <div id="portfolio_img3" class="portfolio_img"></div>
    <div id="portfolio_img4" class="portfolio_img"></div>
    <div id="portfolio_img5" class="portfolio_img"></div>
    <div id="portfolio_img6" class="portfolio_img"></div>
    <div id="portfolio_img7" class="portfolio_img"></div>
    <div id="portfolio_img8" class="portfolio_img"></div>
    <div id="portfolio_img9" class="portfolio_img"></div>
    <div id="portfolio_img10" class="portfolio_img"></div>
    <div id="portfolio_img11" class="portfolio_img"></div>
    <div id="portfolio_img12" class="portfolio_img"></div>
    <div id="portfolio_img13" class="portfolio_img"></div>
    <div id="portfolio_img14" class="portfolio_img"></div>
    <div id="portfolio_img15" class="portfolio_img"></div>
</div>

我想要一个类“白色覆盖”应用于所有div，除了有鼠标的div。另外，我希望这节课的淡入淡出（500毫秒），这样我的照片亮度就不会突然改变

谢谢

---

当您将鼠标悬停在其中一个文件夹上时（不包括您悬停在上面的文件夹），这会设置所有

portfolio\u img

div的样式。工作示例。

您可以将该类添加到所有图像中，并将其从悬停时的图像div中删除。您可以使用

jqueryui

SwitchClass（）

方法设置css类切换的动画，但是如果您只想更改透明度，我认为以下操作更容易：

$('div.portfolio_img').fadeTo(500, 0.5);

$('div.portfolio_img').hover(function() {
    $(this).fadeTo(500, 1);
}, function() {
    $(this).fadeTo(500, 0.5);
});

---

看看这个。

我用最简单的方法为您创建了一个JSFIDLE示例

    $('.portfolio_img').hover(function(){
        $('.portfolio_img').not(this).toggleClass('white_overlay');
    });

请看这里：

**编辑

我还为渐变效果添加了CSS3过渡。检查上面的jsFiddle

 -moz-transition: background-color ease-in-out .3s;
 -webkit-transition: background-color ease-in-out .3s; 

---

能否指定何时添加此类？在投资组合的鼠标上？这不是一个坏方法，我个人认为它可以更简单。另外，你的例子和问题不一样。没有添加任何类。。。

 -moz-transition: background-color ease-in-out .3s;
 -webkit-transition: background-color ease-in-out .3s; 

$('div.portfolio .portfolio_img').addClass('white overlay');

$('.portfolio_img').hover(function() {
  elem = '#' + $(this).attr('id');
  $(elem).removeClass('white overlay').fadeTo(500, 1);
}, function() {
  elem = '#' + $(this).attr('id');
  $(elem).addClass('white overlay').fadeTo(500, 0.5);
});