Soll der "Hovereffekt" denn wirklich bei Klick sichtbar werden? Denn dann werde ich ja eh auf eine andere Seite umgeleitet. Eher doch bei mouseover, oder? Ansonsten wäre vielleicht die CSS Pseudoklasse :target etwas für dich. Das geht aber nur mit klickbaren Links mit Anker. Siehe hier: http://www.w3schools.com/cssref/sel_target.asp
Ansonsten sollte auch ein recht simples JavaScript helfen. Dazu musst Du allerdings ein wenig Markup ändern:
Füge jedem Link in der Auflistung rechts eine allgemeine CSS Klasse listlink und eine id mit einem Wert, der dem Bundesland entspricht hinzu (z.B. list-bw für Baden-Württemberg):
HTML-Code:
<a class="listlink" id="list-bw" href="bundesland-baden-wuerttemberg.html">Baden-Württemberg</a>
Füge jedem Link in der Karte links ebenfalls eine allgemeine CSS Klasse maplink und eine id für das Bundesland hinzu:
HTML-Code:
<a class="maplink" id="map-bw" href="bundesland-baden-wuerttemberg.html" title="Sonderpreis Baumarkt: Filialen in Baden-Württemberg">
Nun noch für die maplinks die :hover Einträge ergänzen:
Code:
/* beachte die zusätzliche CSS-Klasse hover! */
ul#deutschland-bundeslaender-css_map li#baden_wuerttemberg a:hover,
ul#deutschland-bundeslaender-css_map li#baden_wuerttemberg a.hover {
background-position: -7.648px -1254.051px;
}
Und zu guter Letzt das JavaScript:
HTML-Code:
jQuery(function($) {
// add a hover class to the corresponding maplink
$('.listlink').on('mouseenter', function() {
var rel = $(this).attr('id').replace('list','map');
$('.maplink#' + rel).addClass('hover');
});
// remove the hover class from the maplink
$('.listlink').on('mouseleave', function() {
var rel = $(this).attr('id').replace('list','map');
$('.maplink#' + rel).removeClass('hover');
});
});
ungetestet, aber so sollte es gehen. In die andere Richtung (Map-Hover > List-Hover) sollte es ähnlich gehen. Tausche einfach im JS alle .listlink gegen .maplink und alle list gegen map umgekehrt
Lesezeichen