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

Question

我该怎么做？我有一个 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 毫秒)，这样我的照片亮度就不会突然发生变化。

谢谢

Answer 1

$(function(){
    $(".portfolio_img").hover(function(){
        var id = $(this).attr("id");
        $(".portfolio_img").not(this).stop().fadeTo(500,0.2);
    }, function(){
        $(".portfolio_img").stop().fadeTo(500,1);
    });
});

当您将鼠标悬停在其中一个上时，这会设置所有 portfolio_img div 的样式(并且不包括您悬停在其上的那个)。工作示例 here .