Mit hover Farbe von mehreren Objekten ändern

Mit hover Farbe von mehreren Objekten ändern

Beitragvon Crys » 17.10.2009, 20:14

Ich habe einen Langen Textblock, der soll, wenn man mit der Maus drüber fährt, seine Hintergrundfarbe ändern. Gleichzeitig soll die Überschrift unterstrichen und blau werden und das Datum nur Unterstrichen.

Hier mein Ausschnitt meines Quelltextes:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>Test</title>
  <style type="text/css"> 
  h2 {
   line-height: 0px;
   text-indent: 0px;
   font-size: 24px;
}
.willk_links {
   float: left;
   clear: left;
}
a:link.willk_link, a:visited.willk_link {
   color: #000;
   text-decoration: none;
}
a:hover.willk_link {
   color: #000;
   text-decoration: underline;

  </style>
  </head>
  <body>
<div class="willk_links"><h2>Neues:</h2>
<a class="willk_link" href="http://localhost/?seite=neues">
Beta Statium eröffnet - Samstag, 22. August 2009
<br />Es hat zwar lange gedauert, aber jetzt ist meine Seite im Beta Stadium!
</div>
  </body>
</html>


Ich weiß nicht wie ich das umsetzten könnte?

thx
Benutzeravatar
Crys
Gelegenheitsleser
 
Beiträge: 17
Registriert: 05.09.2009, 21:19

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon sejuma » 18.10.2009, 07:44

Du kannst den Hover-Effekt jeweils nur einem Element zuweisen.
Mit größeren Bereichen hat der IE 6 Probleme.
Sieh mal, ob dir dies weiterhilft: http://www.ohne-css.gehts-gar.net/0059.php
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon Crys » 25.10.2009, 15:11

Geht das auch einfach zu realisieren, ohne das es IE <6 valide ist?
FF3 und IE7 valide würde mir reichen ...
Benutzeravatar
Crys
Gelegenheitsleser
 
Beiträge: 17
Registriert: 05.09.2009, 21:19

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon sejuma » 25.10.2009, 18:19

Ja, moderne Browser können den Hover-Effekt auch für andere Elemente.

Hier mal als Beispiel:

HTML:
Code: Alles auswählen
<div id="selektor">
<h1>Inhalt</h1>
</div>


CSS:
Code: Alles auswählen
#selektor {
width: 300px;
height: 100px;
background: green;
}

#selektor:hover {
background: red;
}

#selektor h1:hover {
color: yellow;
text-decoration: underline;
}
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon Crys » 30.10.2009, 16:23

Ich bekomm es einfach nicht hin ...

Ich will das, wenn man im unten stehenden Beispiel über den Link fährt alles unterstrichen wird und .willk_ueber noch zusätzlich von blau auf rot wechselt:
test.html: ...
<a class="willk_link" href="http://localhost/?seite=neues">
<div class='willk_ueber'>Beta Statium eröffnet </div>- Samstag, 22. August 2009
<br />Es hat zwar lange gedauert, aber jetzt ist meine Seite im Beta Stadium!</a>
...
test.css: ...
a:link.willk_link, a:visited.willk_link {
color: #000;
text-decoration: none;
}

a:hover.willk_link {
text-decoration: underline;
}

.willk_ueber:hover {
color: red;
}
.willk_ueber {
color: blue;
}
...
Das geht nicht!

Wie mach ich das richtig?
Benutzeravatar
Crys
Gelegenheitsleser
 
Beiträge: 17
Registriert: 05.09.2009, 21:19

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon sejuma » 30.10.2009, 18:47

Das Hovern funktioniert nicht gleichzeitig, sondern immer nur wenn du mit der Maus über das entsprechende Element fährst.
Stell vielleicht mal einen Link zu deiner Seite rein, damit man alles im Zusammenhang sieht.
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon Crys » 01.11.2009, 12:31

Hier mal ein Link: http://chris88.bplaced.net/
Auf der ersten Seite, das unter 'Neues' und unter 'Tools'!
Bei 'Neues' hab ich mal nichts verändert, also von der Überschrift her und bei Tools habe ich versucht, das sich die Überschrift anders bei hover verändert, haut aber nicht hin, wie man sieht ...
Benutzeravatar
Crys
Gelegenheitsleser
 
Beiträge: 17
Registriert: 05.09.2009, 21:19

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon sejuma » 01.11.2009, 17:33

Meinst du so?
Code: Alles auswählen
a:hover.willk_link {
   color: #126fb3;
   text-decoration: underline;
   display: block;
   background: #ccc;
}
a.willk_link:hover span {color: #f00;} 


Code: Alles auswählen
<a class="willk_link" href="/neues.html"><span>Beta Statium eröffnet</span> - Samstag, 22. August 2009<br>Es hat zwar lange gedauert, aber jetzt ist meine Seite im Beta Stadium!...</a>
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46

Re: Mit hover Farbe von mehreren Objekten ändern

Beitragvon Crys » 01.11.2009, 18:51

Danke sejuma! Super Antwort ...

Ich hatte ich mit span usw. rumprobiert, aber dabei ist nichts zustande gekommen, weil ich den falschen Syntax benutzt hab ... ich wusste nicht wie ich das 'a' 'span' 'willk_link' usw. anordnen soll ... das muss ich mir noch mal anschaun :wink:
Benutzeravatar
Crys
Gelegenheitsleser
 
Beiträge: 17
Registriert: 05.09.2009, 21:19


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Mit hover Farbe von mehreren Objekten ändern"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste