Jquery применяет стиль CSS ко всем элементам с определенным классом, кроме изображения при наведении курсора - PullRequest
Новая
       5

Jquery применяет стиль CSS ко всем элементам с определенным классом, кроме изображения при наведении курсора

0 голосов
/ 25 ноября 2011

Как я могу это сделать? У меня есть список дел: 

<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 мс), чтобы не было внезапного изменения яркости моих фотографий.

Спасибо

Ответы [ 4 ]

1 голос
/ 25 ноября 2011 
$(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 деления, когда вы наводите курсор на один из них (и исключает тот, над которым вы зависали). Рабочий пример здесь .

0 голосов
/ 25 ноября 2011 
$('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 голосов
/ 25 ноября 2011

Я создал для вас пример jsFiddle самым простым и легким способом сделать это. 

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

Посмотрите здесь: http://jsfiddle.net/peduarte/6yeU6/

** РЕДАКТИРОВАТЬ

Я добавил CSS3-переход для эффекта Fade. Проверьте jsFiddle выше. 

 -moz-transition: background-color ease-in-out .3s;
 -webkit-transition: background-color ease-in-out .3s;
0 голосов
/ 25 ноября 2011

Вы можете добавить класс ко всем изображениям и удалить его из изображения div при наведении курсора. Вы бы анимировали переключение классов CSS, используя метод JQuery UI SwitchClass(), однако, если вы хотите изменить только прозрачность, я думаю, что следующее проще: 

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

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

См. Это демо .

...