Jquery將css樣式應用於除鼠標懸停圖像以外的某個類的所有元素

我該怎麼做？我有div的名單：Jquery將css樣式應用於除鼠標懸停圖像以外的某個類的所有元素

<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的不同之處在於具有鼠標移到它的人。此外，我希望這堂課能夠淡入淡出（500毫秒），以便照片的亮度不會突然變化。

感謝

來源

2011-11-25 user852974

你能指定當你想添加這個類？在鼠標懸停在投資組合？ – Przemek

您可以將該類添加到所有圖像並將其從懸停的圖像div中刪除。你應該使用JQuery UISwitchClass()方法動畫CSS類切換，但是如果你只是想改變，我認爲以下是比較容易的透明度：

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

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

看到這個demo。

來源

2011-11-25 10:54:09 fardjad

這不是一個糟糕的做法，我個人認爲這可能會更簡單。另外，你的例子與問題不一樣。沒有課程正在添加... – peduarte

$(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。

來源

2011-11-25 10:52:59 Purag

我以最簡單最簡單的方式爲您創建了一個jsFiddle示例。

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

看一看這裏：http://jsfiddle.net/peduarte/6yeU6/

**編輯

我已經加入了淡入淡出效果CSS3過渡了。檢查上面的jsFiddle。

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

來源

2011-11-25 11:01:17 peduarte

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

來源

2011-11-25 11:15:49 Arindam

Jquery將css樣式應用於除鼠標懸停圖像以外的某個類的所有元素

回答

相關問題