✔ Rahmen um Bilder soll bei Mouseover die Farbe ändern

Status
Nicht offen für weitere Antworten.
B

bgrenz

Grünschnabel
Hallo,

ich möchte bei meinen Thumbnails einen 2px Rahmen, der beim Überfahren mit der Maus die Farbe ändert.

Nun hab ich in der CSS Datei folgendes stehen:

.thumbs {border-width: 2px; border-style:solid; border-color: #FF0000}

a:hover .thumbs {border-width: 2px; border-style:solid; border-color: #FFFFFF}


Das klappt auch ganz gut, ABER
wenn ich das Bild in den Textfluß einbinden will, mit align="left" klappt das mit dem Hover Rahmen im IE nicht mehr (mit Firefox kein Problem). Dann ändert beim Mouseover nur ca. 1/3 des Rahmens die Farbe!

Wie kann ich da eine Lösung finden, die auch mit dem IE klappt

Danke für die Hilfe!
 
Hi,

danke für die schnelle Antwort. Leider klappt es nicht so wirklich. Vor allem nicht mit dem IE
Mach ich auf der HTML Seite irgendetwas falsch?

Hier mal der Code:

<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

</head>

<body class="mainbody">


<p><a target="_blank" href="http://www.joedinkelbach.de">
<img class="thumbs" src="images/logos/joe.jpg" align="left" width="100" height="68"> </a>Testzeile</p>


</body>

</html>
 
du musst dem link die classe zuteilen
und wahrscheinlich musst du noch höhe und breite angeben

größe samuel
 
Hi,

versuch es mal mit folgender Konstruktion.
Code: 
a.thumbs{ /* Deine Link-Formatierungen */}
a.thumbs:hover{ /* Deine Link:hover-Formatierungen */
                height: auto;}
a.thumbs img { border: 2px solid #FF0000;}
a.thumbs:hover img { border: 2px solid #FFFFFF;}
Die Eigenschaft height: auto in a.thumbs:hover muss nur dann stehenbleiben,
wenn sonst keine anderen Formatierungen in dieser Klasse vorgenommen werden.

height: auto wurde deshalb gewählt, da sie keine wirkliche Auswirkung auf
das Design hat. Würde sie fehlen und die Klasse wäre leer, würde der Browser
keinen hover-Effekt interpretieren. Das hätte natürlich auch zur Folge, dass der
Rahmenwechsel um das Bild, der zwei Klassen tiefer definiert wird, nicht stattfinden
würde.

Der Aufruf im HTML-Dokument wäre wie folgt:
Code: 
<a class="thumbs" target="_blank" href="http://www.joedinkelbach.de">
<img src="images/logos/joe.jpg" align="left" width="100" height="68"></a>
Ciao
Quaese
 
Hi Quaese,

das klappt schon prima. Vielen Dank. Im Firefox erscheint allerdings beim Bild Mouseover ein senkrechter Strich vor der ersten Textzeile!


<a class="thumbs" target="_blank" href="http://www.joedinkelbach.de">
<img src="images/logos/joe.jpg" align="left" width="100" height="68"></a><a href="music/index.htm">Test</a></p>

Also in diesem Fall vor dem Wort "Test".
Falls Du da noch eine Idee hast...


Gruß,
Benny.
 
Hi,

sorry, aber bei mir tritt das Phänomen nicht auf.

Vielleicht kannst Du das Problemdokument mal online stellen.

Ciao
Quaese
 
Hi,

es liegt an den Rahmen, die Du den Links mit der Klasse .thumbs zuweist.
Code: 
A.thumbs
{
    BORDER-RIGHT: #e2ebfe 2px solid;
    BORDER-TOP: #e2ebfe 2px solid;
    BORDER-LEFT: #e2ebfe 2px solid;
    BORDER-BOTTOM: #e2ebfe 2px solid
}
A.thumbs:hover
{
    BORDER-RIGHT: white 2px solid;
    BORDER-TOP: white 2px solid;
    BORDER-LEFT: white 2px solid;
    BORDER-BOTTOM: white 2px solid;
    HEIGHT: auto
}
Lässt Du die border-Angaben einfach weg, so ändert sich nichts an der Funktionalität,
das Problem ist aber behoben.
Code: 
A.thumbs{}
A.thumbs:hover{ HEIGHT: auto;}
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück