<div id="portfolio_img1" class="portfolio_img"></div> <div id="portfolio_img2" class="portfolio_img"></div> <div id="portfolio_img3""> <div id="portfolio_img1" class="portfolio_img"></div> <div id="portfolio_img2" class="portfolio_img"></div> <div id="portfolio_img3""> <div id="portfolio_img1" class="portfolio_img"></div> <div id="portfolio_img2" class="portfolio_img"></div> <div id="portfolio_img3"" />

マウスオーバーイメージ以外の特定のクラスを持つすべての要素にCSSスタイルを適用するJquery

これどうやってするの? 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に適用したいと思います。また、私の写真の明るさに突然の変化がないように、このクラスをフェードイン/オフ(500ms)したいと思います。

ありがとう

0
このクラスをいつ追加するかを指定できますか?ポートフォリオのマウスオーバー時に?
追加された 著者 Przemek,

4 答え

$(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をスタイルします。実際の作業例は、こちらをご覧ください。

1
追加された

すべての画像にクラスを追加し、ホバーの画像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);
});

このデモをご覧ください。

0
追加された
それは悪いことではありません。私は個人的にはそれがもっと簡単かもしれないと思います。また、あなたの例は質問された質問と同じではありません。クラスが追加されていません...
追加された 著者 peduarte,

私はあなたのためのjsFiddleの例を、それを行うための最も簡単で簡単な方法で作成しました。

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

Have a look here: http://jsfiddle.net/peduarte/6yeU6/

** EDIT

フェード効果のCSS3トランジションも追加しました。上記のjsFiddleを確認してください。

 -moz-transition: background-color ease-in-out .3s;
 -webkit-transition: background-color ease-in-out .3s; 
0
追加された
$('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);
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript