link hover soll weitere definierte links hovern

Andreas1977 · #1 (**permalink**) 05.10.2009, 21:11

Hallo zusammen,

bin auf dieses Forum gestoßen da ich ein größeres CSS Problem habe.

In meinem Kopf stellt sich mein Projekt folgendermaßen dar.

Ich sehe 2 Link Spalten

Link 1 Link A
Link 2 Link B
Link 3 Link C

Nun sollte wenn ich über Link 1 fahre ebenfalls Link B der hover erscheinen. Oder wenn ich auf Link 3 gehe, dass dann Link A ebenfalls hover anzeigt.

Kurz gesagt:

Ein hover soll gleichzeitig mehrere andere vordefinierte hover mit anzeigen.

Möchte ganz ohne Java auskommen, geht das mit CSS?

XImbericle · #2 (**permalink**) 05.10.2009, 21:21

Omg, wenn man bei sowas Java benutzen würde, wärs dämlich, da könnt man gleich mim Jungelsäbel sich n Butterbrot schmieren

Du kannst in CSS (zumindest die Versionen die ich kenn) über Pseudoklassen wie hover, nur auf Kinderlemente oder das Element selbst verfügen.
Will heißen, das das andere Element ein Kinderelement sein muss.

Dein Problem ist viel einfacher zu lösen, ohne auf die Zweite Zelle zugreifen zu müssen, wenn du deine Tabelle mit tr und td hast, dann gib dem entsprechendem tr (der Reihe) einfach ne Id, und setz dann hover drauf.

Hoffe es ist verständlich, wenn nicht lesen bis es das wird

MfG

Andreas1977 · #3 (**permalink**) 05.10.2009, 21:39

ich arbeite nicht mit Tabellen.

Wie rufe ich dann die die anderen hover zusätzlich zum eigentlichen auf?

Code:

<div id="links">
	<div id="winter">
			<div id="dezember">
			<li><a href="http://www.xy.com">Link 1</a></li>
			<li><a href="http://www.ax.com">Link 2</a></li>
			<li><a href="http://www.xv.com">Link 3</a></li>
			</div>
	</div>
</div>

<div id="rechts">
	<div id="herbst">
			<div id="september">
			<li><a href="http://www.gt.com">Link A</a></li>
			<li><a href="http://www.er.com">Link B</a></li>
			<li><a href="http://www.uz.com">Link C</a></li>
		</div>
	</div>
</div>

Pr0g · #4 (**permalink**) 05.10.2009, 22:22

Was XImbericle meint ist das Hovern einer ganzen Tabellenzeile, was für dich aber nicht in Frage kommt, da du weder Tabellen nutzt, noch eine Zeile direkt hovern willst, sondern wie ich es verstanden habe die Einträge aus verschiedenen Zeilen.

Mit CSS ist dies nicht so einfach möglich. Ich habe trotzdem mal ein kleines Beispiel gemacht. In jeden Link wird noch ein span gepackt, welches sozusagen auf der Position des jeweils anderen Links liegt und durch die Farbe ein Hovern von diesem "simuliert". Bei den spans aus #link_right muss der Linktitel erneut angegeben werden, da diese nicht unter den linken Links liegen, sondern darüber und den Text also überdecken. Schau es dir einfach mal an. Ist zwar nun keine Liste, sondern mit festen Positionen, aber es sollte das Schema verdeutlichen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#link_container {
  position: relative;
}

#link_container a {
  display: block;
  width: 100px;
  height: 30px;
  text-align: center;
}

#link_container a:hover {
  background-color: red;
}

#link_container a:hover span {
  display: block;
}

#link_right {
  position: absolute;
  left: 100px;
  top: 0;
}

#link_container span {
  width: 100px;
  height: 30px;
  position: absolute;
  display: none;
  background-color: red;
}

#link_left span { left: 100px; }
#link_right span { left: -100px; }

#span_a { top: 0; }
#span_b { top: 30px; }
#span_c { top: 60px; }

#span_1 { top: 0; }
#span_2 { top: 30px; }
#span_3 { top: 60px; }

</style>
</head>
<body>

<div id="link_container">
  <div id="link_left">
    <a href="/link1.html" id="link_1">Link 1<span id="span_b"></span></a>
    <a href="/link2.html" id="link_2">Link 2<span id="span_c"></span></a>
    <a href="/link3.html" id="link_3">Link 3<span id="span_a"></span></a>
  </div>
  <div id="link_right">
    <a href="/linka.html" id="link_a">Link a<span id="span_3">Link 3</span></a>
    <a href="/linkb.html" id="link_b">Link b<span id="span_1">Link 1</span></a>
    <a href="/linkc.html" id="link_c">Link c<span id="span_2">Link 2</span></a>
  </div>
</div>

</body>
</html>

Bei einer Liste mit Variablen Positionen könnte es schwierig werden, außer es gibt noch einen Trick für diese Technik (hab sie selbst noch nie genutzt, daher kann ich dir nur zeigen was ich grad so weiß).

Da es sich nur um einen optischen Effekt handelt, der die Bedienbarkeit nicht beeinträchtigt, denke ich kann man zur Not auch JavaScript nutzen.

XImbericle · #5 (**permalink**) 05.10.2009, 22:27

Zitat:

Ich sehe 2 Link Spalten

Drück dich dann doch das nächste mal bitte gleich deutlich aus, von "Spalten" schloss ich auf Tabellen

MfG

Andreas1977 · #6 (**permalink**) 05.10.2009, 22:34

Danke für die Antwort.

Werde mir das Morgen mal näher anschauen.

Mein Ursprungsgedanke war, dass ich jeden Link mit einer eigenen Klasse belege und diese dann zusätzlich bei beliebig anderen Links zusätzlich einbauen und anzeigen (hover) lassen kann. Mit fixen Positionen habe ich auch schon nachgedacht.

Wenn jeder Link eine separate Klasse hat, kann denke ich individuell gehovert und zusätzlich gehovert werden oder?!?

So wie ich das überflogen habe deutet die Antwort in diese Richtung?!?

Wie gesagt, morgen mal schauen.

Andreas1977 · #7 (**permalink**) 05.10.2009, 22:36

Zitat:

Zitat von XImbericle

Drück dich dann doch das nächste mal bitte gleich deutlich aus, von "Spalten" schloss ich auf Tabellen

MfG

Stimmt, ich habe nicht erwähnt dass ich ohne Tabellen arbeite.
Ich dachte nur dass es rein optisch ein Spalten design darstellt.

trotzdem Danke.

Pr0g · #8 (**permalink**) 05.10.2009, 22:39

Du denkst von der falschen Seite her was das Hovern angeht.

Code:

.mein_link:hover { color:red; }
...
<a href="link1.html" class="mein_link">Link1</a>
<a href="link2.html" class="mein_link">Link2</a>

Wenn du nun Link1 hoverst wird geschaut ob es eine passende CSS Angabe für das Hovern von .mein_link gibt. Ja gibt es, also Text im Link rot färben, so wie es dort steht. Ende. Würdest du Link2 hovern gilt das selbe für ihn. Aber auch nicht mehr.

Das Hovern bezieht sich also immer nur auf das gehoverte Element, also den einen Link. Es wird nicht geschaut welche andern Elemente die selbe CSS Klasse haben oder dergleichen.

Andreas1977 · #9 (**permalink**) 06.10.2009, 18:06

Zitat:

Zitat von Pr0g

Was XImbericle meint ist das Hovern einer ganzen Tabellenzeile, was für dich aber nicht in Frage kommt, da du weder Tabellen nutzt, noch eine Zeile direkt hovern willst, sondern wie ich es verstanden habe die Einträge aus verschiedenen Zeilen.

Mit CSS ist dies nicht so einfach möglich. Ich habe trotzdem mal ein kleines Beispiel gemacht. In jeden Link wird noch ein span gepackt, welches sozusagen auf der Position des jeweils anderen Links liegt und durch die Farbe ein Hovern von diesem "simuliert". Bei den spans aus #link_right muss der Linktitel erneut angegeben werden, da diese nicht unter den linken Links liegen, sondern darüber und den Text also überdecken. Schau es dir einfach mal an. Ist zwar nun keine Liste, sondern mit festen Positionen, aber es sollte das Schema verdeutlichen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#link_container {
  position: relative;
}

#link_container a {
  display: block;
  width: 100px;
  height: 30px;
  text-align: center;
}

#link_container a:hover {
  background-color: red;
}

#link_container a:hover span {
  display: block;
}

#link_right {
  position: absolute;
  left: 100px;
  top: 0;
}

#link_container span {
  width: 100px;
  height: 30px;
  position: absolute;
  display: none;
  background-color: red;
}

#link_left span { left: 100px; }
#link_right span { left: -100px; }

#span_a { top: 0; }
#span_b { top: 30px; }
#span_c { top: 60px; }

#span_1 { top: 0; }
#span_2 { top: 30px; }
#span_3 { top: 60px; }

</style>
</head>
<body>

<div id="link_container">
  <div id="link_left">
    <a href="/link1.html" id="link_1">Link 1<span id="span_b"></span></a>
    <a href="/link2.html" id="link_2">Link 2<span id="span_c"></span></a>
    <a href="/link3.html" id="link_3">Link 3<span id="span_a"></span></a>
  </div>
  <div id="link_right">
    <a href="/linka.html" id="link_a">Link a<span id="span_3">Link 3</span></a>
    <a href="/linkb.html" id="link_b">Link b<span id="span_1">Link 1</span></a>
    <a href="/linkc.html" id="link_c">Link c<span id="span_2">Link 2</span></a>
  </div>
</div>

</body>
</html>

Bei einer Liste mit Variablen Positionen könnte es schwierig werden, außer es gibt noch einen Trick für diese Technik (hab sie selbst noch nie genutzt, daher kann ich dir nur zeigen was ich grad so weiß).

Da es sich nur um einen optischen Effekt handelt, der die Bedienbarkeit nicht beeinträchtigt, denke ich kann man zur Not auch JavaScript nutzen.

Super, genau so wollte ich das.

Ein kleiner Markel hat die Sache noch.
Wenn ich die linken Links überfahre, dann werden die rechten wie gewünscht ebenfalls markiert und der Linktext bleibt lesbar.
So soll es sein.

Wenn ich aber über die rechten fahre werden die die linken markiert, aber die Linktext ist verschwunden (überlagert).

Kann man das auch noch beheben?

Das wäre echt super...

Pr0g · #10 (**permalink**) 06.10.2009, 19:18

Dafür hatte ich eigentlich in die Spans aus der rechten Box den Linktitel erneut eingetragen (siehe mein Codebeispiel).

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.	Picasso	CSS	36	03.01.2011 19:41
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
Hintergrundbild bei mehrzeiligen Links	Offshore	CSS	4	19.12.2008 14:00
Ständig wechselnde Bilder, Werbung	Vybsi	(X)HTML	17	24.01.2008 23:00
image vor Link, wenn hover und active. Aber wie???	18inch	CSS	3	27.09.2004 03:07