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，除了鼠标悬停在它上面。此外，我希望这个课程能够淡入淡出（500ms），这样我的照片亮度就不会突然变化。

由于

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。

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

Answer 3

我以最简单，最简单的方式为您创建了一个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;

Answer 4

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

Jquery将css样式应用于除鼠标悬停图像之外的某个类的所有元素

4 个答案: