Включите другие изображения в оттенках серого, когда один заголовок / изображение наведен

0

Я составляю обзорную страницу для списка проектов. У меня есть текстовый список проектов на странице и уменьшенные изображения этого списка. Все они появляются на одной странице. Моя цель - получить все остальные миниатюры в оттенках серого, когда один заголовок или изображение зависает.


Вот рабочая скрипка для моего вопроса

Link to fiddle: http://jsfiddle.net/ka2Xs/6/

Поэтому моя цель:
1 - Когда вы наводите указатель на "Name 1", он становится красным. Но зависание на "Name 1" также должно превращать все изображения в оттенки серого, кроме первого изображения.

И наоборот:
2 - Наведите первое изображение, чтобы все остальные изображения превратились в оттенки серого и должны были превратить "Имя 1" в красный.

Это же действие для других изображений и ссылок, конечно. Надеюсь, так ясно.

img: http://img19.myimg.de/10f3cc.jpg

  • 1
    Создайте JSFiddle с вашим кодом, пожалуйста.
  • 0
    Я добавил новый ответ с работающей скрипкой.
Теги:
hover
grayscale

2 ответа

1

Надеюсь, я правильно вас понимаю, без работы Fiddle на вашем конце трудно представить все требования - вот краткий пример для большей части вашего запроса, используя jQuery :not selector и свойство filter CSS:

Рабочий пример здесь

HTML

<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>

CSS

.thumb {
    background: maroon;
    display: inline-block;
    height: 200px;
    width: 200px;
}

.thumb.hover {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray; /* IE 6-9 */
}

JQuery

$('.thumb').on('mouseover', function(){
    $('.thumb').not($(this)).addClass('hover');
});

$('.thumb').on('mouseout', function(){
    $('.thumb').not($(this)).removeClass('hover');
});
  • 0
    Я думаю, что это не совсем то, что я имел в виду. Я отредактировал свой вопрос с рабочей скрипкой.
  • 0
    Хорошо, как это? Код не очень эффективен, но вы можете сделать его лучше :) jsfiddle.net/ka2Xs/7
0

Я думаю, ваш вопрос состоял в том, как связать зависание на вашей ссылке, чтобы сделать соответствующее изменение в выборе для ваших изображений. Его довольно легко с jquery:

$('#sub-menu').find('a').hover(function(){
    var index =$('a').index($(this)); // this will get you the index of the link that is hovered on
    $('img').eq(index).css('opacity', 1); // this find find the image at the corresponding index and change its opacity to 1.
});

вы можете иметь непрозрачность остальных изображений 0,1, чтобы это было выделено. также напишите код для зависания.

  • 0
    Я отредактировал свой вопрос с рабочей скрипкой.
  • 0
    Вот то, что вы хотите, отметьте ответ как правильный, если это то, что вы ищете .. jsfiddle.net/ka2Xs/11 Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню