Hol dir einen HTML-Link, um eine css-Image-Karte zu aktivieren. Hover

Question

Ich habe mir ein paar andere Fragen angeschaut, aber nichts gefunden, was mir das erklärt. Ich bin ziemlich Anfänger darin. Dies ist für diese Website: http://www.lostpathway.com/village.html Ich habe eine Image-Map in CSS (siehe unten). Ich habe es so, wenn du mit der Maus über die Karte gehst und auf einen Bereich klickst, geht es auf die entsprechende Webseite. Ich habe auch ein CSS-Menü am oberen Rand der Seite, die einen Hover-Effekt auf das Menü hat und auch auf die entsprechende Seite geht. Ich möchte das Menü und die Imagemap so verknüpfen, dass beim Bewegen des Mauszeigers über den Menübereich auch der Hover der Imagemap aktiviert wird und umgekehrt. Ich habe nicht herausgefunden, wie ich das machen soll. Jede Hilfe wäre willkommen.

/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;}/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;} 

Answer 1

Es gibt keine Möglichkeit, in reiner CSS das Styling auf dem Schweben eines anderen zu ändern, mit Ausnahme der wenigen Fälle, wenn die Elemente sind Geschwister, Eltern, usw.

In Ihrem Fall müssen Sie eine sehr kleine Menge von Jquery, wir verwenden Ihre "Memory Tree" Links als ein Beispiel.

Geben Sie jedem <a> mit dem gleichen Wert href die gleiche Klasse:

<a href="./memory.html" id="memory1" class="memory"> <span> ... </span> </a> 
<a href="./memory.html" id="memory2" class="memory"> <img> </a> 

Dann in JQuery:

$(".memory").on("mouseover", function() { 
    $("#memory1").css("background-color","green"); // Whatever green that is 
    $("#memory2").css("background", "url(./villagemap.gif) -31px -740px no-repeat"); 
});