Border bei mouseover?
-
Hi, ich benutze folgenden Code:
<tr><td onmouseover="this.style.backgroundColor='#66A8E5';" onclick="window.location.href='index.php'" onmouseout="this.style.backgroundColor='transparent';" height=6> <? echo $arrow; ?> <a href="index.php">Startseite</a></td></tr>Der Code bewirkt, dass beim mouseover das td farbig wird, nur wie mach ich dass jetzt, wenn ich auch den border beim mouseover zeichnen kann und beim mouseout wieder ausblenden will?
onmouseover="this.style.border='1';"
geht nicht
-
Das macht man ganz anders. Das JavaScript-Geblubbere lassen wir mal ganz weg und beschränken uns auf css.
<!-- in der css-datei -->
link.link {
background-color:blue;
border-width:1p;
border-color:blue;
border-style:solid;
display:block;
}link.hover{
background-color:white;
border-width:1p;
border-color:black;
border-style:solid;
display:block;
}<!-- in der HTML-Datei -->
<tr><td><a href='index.php' class='link'>Startseite</a></td></tr>
MfG
Tobsen
-
Ja, ich weiß, css wollte ich auch benutzen, aber das klappt nicht, jetzt mal zu deiner class: Die geht leider auch nicht, wegen display:block; wird die zeile nur beim hover umgebrochen.
.Wenn du willst, kann ich dir einen link zeigen.
-
Dieser Beitrag wurde gelöscht!
-
kannst es auch anders machen. z.B. folgendermaßen (sieht glaube ich auch ganz nett aus):
link.link { background-color:blue; border-width:1p; border-color:blue; border-style:solid; padding:5px; } link.visited { background-color:blue; border-width:1p; border-color:blue; border-style:solid; padding:5px; } link.hover{ background-color:white; border-width:1p; border-color:black; border-style:solid; padding:5px; } <div style='border-width:1px; border-style:solid; .....'> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> <a href ="" class='link'>Seite 1</a> </div>MfG
Tobsen
-
Danke, aber das ist leider immernochnciht, was ich meine.
ich will beim td einen border haben!
-
gibs net sowas wie onmouseout?
-
doch, hat er ja bisher auch verwendet, aber es geht gerade um eine CSS-Lösung
-
ne nicht unbedingt es kann auch per javascript sein.
-
du könntest den hover-effekt mal bei den td-tags ausprobieren, funktioniert soweit ich weiß aber noch in den meisten browsern nicht. Wieso bestehst du eigentlich auf den td-border??
-
Original erstellt von Tobsen:
du könntest den hover-effekt mal bei den td-tags ausprobieren, funktioniert soweit ich weiß aber noch in den meisten browsern nicht.Hm... hab ich schon probiert, klappt zwar, aber es wird nur das wort umrandet und nicht das td.
Original erstellt von Tobsen:
Wieso bestehst du eigentlich auf den td-border??[/QB]Weil das viel besser aussieht, und weil die anderen sachen anscheinend nicht gehen.
-
JS: Ausfälle ; DESIGN: Was fehlt hier?
Schau mal da, zweite Seite.
Füge mal in dein CSS display : block ein. Dann sollte es funktionieren.
MfG SideWinder
-
danke, aber das hatte mir tobsen schon gesagt, da wird beim hover die ganze zeile eine zeile nach unten gesetzt!
-
Hmm verstehe ich nicht - bei mir funktioniert das nun auch wunderbar: www.faulerhund.net/sidewinder/test/index.php
Schau dir vielleicht mein Stylesheet an:
www.faulerhund.net/sidewinder/test/sidewinder.cssMfG SideWinder
-
Hm... ja ok, soweit bin ich jetzt gekommen, aber was mir nicht gefällt ist, dass die ganzen daunterliegenden links noch unten gedrückt werden, siehe bei dir...
-
Das verhinderst du ganz einfach indem du den border setzt und nur dessen farbe beim hovern veränderst, also davor den border setzen und einfach in gleicher Farbe wie die Hintergrundfarbe.
MfGTobsen
-
ja, hatte ich mir auchschon überlegt, aber das geht nicht, ich hab einen hintergrund *scheiße*
Wenn ihr wollt könnt ihr euch das mal anschauen: http://www.filesforfree.de/preview
Die linke menüleiste
-
Dann setze einfachh ein padding zum Ausgleich! Also border:1px solid #000000; padding:0px; und bei hover: border-width:0px und padding:1px;
Ich hab's mit deiner Seite getestet -> klappt prima (Ist allerding eben JS )
Aber probier es mal mit einem div innerhalb des a-Tags für eine reine CSS-Lösung
-
Man kann als Farbe auch transparent wählen, dann braucht man den Farbwert nicht ständig neu schreiben (und sone scherze mit padding bleiben einem erspart ;))
-
Original erstellt von Loggy:
Man kann als Farbe auch transparent wählen, dann braucht man den Farbwert nicht ständig neu schreiben (und sone scherze mit padding bleiben einem erspart ;))danke, das hab ich ausprobiert, aber das geht auchnicht, der border ist dann = 0.