Adding hover effects for links in image map (area)

css hover imagemap
user4194677 picture user4194677 · Oct 29, 2014 · Viewed 34.9k times · Source

I'm only a beginner in html and I would like to put hover effects for my image map. I have searched for lots of solutions but I only come up with solutions using script which I don't understand.

How does this script work? I tried using 

area:hover {
border: 1px solid white;
}

But it does not work.

Answer

lu-bhz picture lu-bhz · Oct 29, 2014

What you're trying to do is not very simple, you will have to combine javascript and css or jquery to give the effect you want.

It's because the area element doesn't accept hover directly, unfortunately...

But the good news is that it was answered before here:

How to apply Hovering on html area tag?

Visible Area tag?

Related questions

div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More