Кто знает хорошо js. Как связать значок с тегом area?

Question

[Дима]

Чуть ниже на странице есть карта. При наведении на нее подсвечивается область area, но также там есть значки "R" у каждой области, они спозиционированы с помощью position: absoulte, и выходит если навести на них, то область не подсвечивается, т.к они закрывают ее так сказать. В общем нужно как-то связать эти значки с областью, кто может помочь? Чтоб при наведении на них тоже подсвечивалась область. В js сам не силен увы.

Answer 1

[rejjer]

Как-то так, но это некрасиво.

$('.marker1').hover(function(){
	$('area[rel="country1"]').mouseover();
},
function(){
	$('area[rel="country1"]').mouseout();
});

Я бы к area добавил :after, который отображал бы картинку R и через CSS менял цвет area, а не display

#myMap area{
	background-color: #1b386b;
	position: relative;
}
#myMap area:after{
	display: block;
	content: '';
	width: 28px;
	height: 32px;
	background-image: url('/test/images/marker.png');
	position: absolute;
}
#myMap area:nth-child(1):after{
	top: 123px;
	left: 456px;
}
#myMap area:nth-child(2):after{
	top: 789px;
	left: 123px;
}
...

#myMap area:hover{
	background-color: #4596cb;
}

Хотя, не помню точно, как работает area..

Comments

[Дима]

Спасибо. Что-то я думал что для area не сработает after и даже не попробовал.

Answer 2

[burtulug]

Значкам надо добавить в css pointer-events: none;

Comments

[Дима]

Интересный вариант, не знал об этом свойстве, только поддерживает не все браузеры его

[burtulug]

Судя по caniuse.com/#search=pointer-events не поддерживают только ie8 и opera mini