Я составляю обзорную страницу для списка проектов. У меня есть текстовый список проектов на странице и уменьшенные изображения этого списка. Все они появляются на одной странице. Моя цель - получить все остальные миниатюры в оттенках серого, когда один заголовок или изображение зависает.
Вот рабочая скрипка для моего вопроса
Link to fiddle:
http://jsfiddle.net/ka2Xs/6/
Поэтому моя цель:
1 - Когда вы наводите указатель на "Name 1", он становится красным. Но зависание на "Name 1" также должно превращать все изображения в оттенки серого, кроме первого изображения.
И наоборот:
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');
});
Я думаю, ваш вопрос состоял в том, как связать зависание на вашей ссылке, чтобы сделать соответствующее изменение в выборе для ваших изображений. Его довольно легко с 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, чтобы это было выделено. также напишите код для зависания.