Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hovering over certain areas of the background.
I have implemented the tilde selector in my CSS code but it doesn't seem to be working properly. Can someone help me troubleshoot this issue?
Here is the HTML Code:
<html>
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
</html>
And here is the CSS Code:
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}
Thank you for your assistance!