CSS Profis - hab eine Frage?

Hallo,

ich habe diese Seite gestaltet:
http://soba.oppel.eu/unsere-maerkte.html

Jetzt aber würde ich gerne, dass wenn man rechts auf ein Bundesland klickt,
das links in der Karte dies gleichzeitig auch "markiert" (Hovereffekt) wird.

Mit CSS ist das doch bestimmt irgendwie möglich oder ?
Das Gleiche natürlich dann auch andersherum :)

Danke & Gruß Dirk

Da die Elemente nicht benachbart sind und auch nicht einander verschachtelt wirst du hier mit CSS nicht weit kommen...
Vermutlich wirst du eher den Links eine JavaScript Funktion draufhauen müssen, die die Bilder austauscht...

Du kannst die jeweiligen roten Bilder innerhalb des a-Tags einbauen und display:none setzen.
Beim :hover machst du sie sichtbar.

Das Schwierige dabei: Alle Bilder müssen positioniert werden.
So wie es aussieht, kannst du sie alle absolut positionieren.

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 :cool:

Danke.
Allerdings hatte ich mich in der Tat falsch ausgedrückt - sorry.

Zitat:

---

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?

---

Ich meinte natürlich beim "Mousover" und nicht bei Klick.