Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Aug 22, 2012

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

@artpolikarpov

This comment has been minimized.

Copy link
Owner Author

commented Aug 23, 2012

@pozadi, спасибо.

@shimopus

This comment has been minimized.

Copy link

commented Oct 19, 2012

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

@vitkarpov

This comment has been minimized.

Copy link

commented Jan 24, 2013

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

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
You can’t perform that action at this time.