Skip to content

Instantly share code, notes, and snippets.

@artpolikarpov
Created August 22, 2012 19:51
Show Gist options
  • Save artpolikarpov/3428762 to your computer and use it in GitHub Desktop.
Save artpolikarpov/3428762 to your computer and use it in GitHub Desktop.
Cинхронное подсвечивание одинаковых ссылок: http://artgorbunov.ru/bb/soviet/20120823/
/*
Функция для одновременной подсветки ссылок с одинаковым href,
на вход принимает:
1) selector — джеквери-селектор ссылок, чтобы
была возможность включить дублирующую подсветку в определённом фрагменте;
2) hoverClass — какой класс добавить по ховеру и псевдо-ховеру.
Инициализация для всего документа:
doubleHover('a', 'hover');
В ЦСС нужно приравнять .hover к :hover:
a:hover, a.hover {
color: red;
}
a:hover img, a.hover img {
opacity: .75;
}
*/
var doubleHover = function(selector, hoverClass) {
$(document).on('mouseover mouseout', selector, function(e) {
$(selector)
.filter('[href="' + $(this).attr('href') + '"]')
.toggleClass(hoverClass, e.type == 'mouseover');
});
}
@rpominov
Copy link

Можно немного упростить – заменить [(e.type == 'mouseover' ? 'add' : 'remove') + 'Class'](hoverClass) на .toggleClass(hoverClass, e.type == 'mouseover')

@artpolikarpov
Copy link
Author

@pozadi, спасибо.

@shimopus
Copy link

Можно еще увеличить скорость работы, повесив не на два события обработчик, а только на одно - mousemove

@vitkarpov
Copy link

Очень не удобно верстать в статике: у всех ссылок одинаковый урл, поэтому подсвечивается просто всё!
Чтобы этого избежать, не проставляя всем уникальные урлы, я просто останавливаю выполнение функции простым условием:

var href = $(this).attr('href');

if (!href || href == '#') {
return;
}

Привычка ставить урлы-заглушки в виде решеток.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment