Jquery将css样式应用于具有特定类的所有元素，除了鼠标悬停图像答案

【问题标题】：Jquery applying a css style to all elements with a certain class except the mouseover imageJquery将css样式应用于具有特定类的所有元素，除了鼠标悬停图像
【发布时间】：2011-11-25 10:43:50
【问题描述】：

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

谢谢

【问题讨论】：

您能否指定您希望何时添加此类？鼠标悬停在投资组合上？

标签： javascript jquery css class fade

【解决方案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。

【讨论】：

【解决方案2】：

您可以将类添加到所有图像并在悬停时将其从图像 div 中删除。您可以使用 JQuery UI SwitchClass() 方法为 css 类切换设置动画，但是如果您只想更改透明度，我认为以下方法更容易：

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

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

看到这个demo。

【讨论】：

这不是一个坏方法，我个人认为它可以更简单。此外，您的示例与提出的问题不同。没有添加任何课程...

【解决方案3】：

$('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);
});

【讨论】：

【解决方案4】：

我以最简单的方式为您创建了一个 jsFiddle 示例。

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

看看这里：http://jsfiddle.net/peduarte/6yeU6/

** 编辑

我也为 Fade 效果添加了 CSS3 过渡。检查上面的jsFiddle。

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

【讨论】：