1 reply [Last post]
jdadwilson's picture
Last seen: 3 weeks 2 days ago
Timezone: GMT-7
Joined: 2010-07-27
Posts: 5
Points: 10

I have a very simple HTML map that is divided into 9 sections (www.txfannin.org). Selecting any section then loads a pdf file with a larger view of the selected section. What I would like is for the area under the hover to appear with an opaque shade to thus indicate the area.

I have tried the following, but it does not work.

map > area:hover {
	background-color: gray;
	opacity: 0.2;
	border: 0;

TIA for any help.

Sky Web
Sky Web's picture
Last seen: 3 years 18 weeks ago
Timezone: GMT+3
Joined: 2020-01-29
Posts: 2
Points: 3

What you're trying to do is

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.

You can implement this functionality as it is described here: https://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag

Here are some additional tips that you may find useful in your work: how to edit video materials for your website.