✔ Hover bei Bild und Text kombiniert

Status
Nicht offen für weitere Antworten.
S

Sonador

Grünschnabel
Hallo zusammen,

der folgende Quelltext bewirkt einen Text hover Effekt. Nun möchte ich aber auch, dass sich der Rahmen des Bildes daneben mit verändert (gleiche Farbe). Wenn ich über das Bild fahre, soll sich wiederum auch die Textfarbe ändern.
In Mozilla funktioniert das komischerweise auch bei dem unteren Quelltext. (beim IE zum Beispiel nicht)


<html>
<head>
<title>Untitled Document</title>
</head>

<style type="text/css">
<!--
a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:active { color:#6fC1C1; text-decoration:none; }
a:hover { color:#6fC1C1; text-decoration:none; }
-->
</style>


<body bgcolor="#000000">
<a href="test.htm">test<img src="../test/1.gif" width="70" height="70"></a>

</body>
</html>


Kann mir jemand helfen?

Freue mich auf Antworten
Grüße

 
Zuletzt bearbeitet:
Jetzt war ich wohl etwas voreilig, denn ich habe eine scheinbare Möglichkeit gefunden.

<style type="text/css">
<!--

a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:active { color:#6fC1C1; text-decoration:none; }
a:hover { color:#6fC1C1; text-decoration:none; }
img {border:0pt}
a.Rahmen {border-width:1pt; border-style:solid; border-color:#000000}
a.Rahmen:hover span { border-width:1pt; border-style:solid; border-color:#66CCCC }
-->
</style>


<body bgcolor="#000000">
<a class=Rahmen href="test.htm">test<span><img src="../test.gif" width="100" height="100" alt=""></span></a>
</body>
</html>


Nur beim Mozilla bringt er den Rahmen nicht einwandfrei.
Vielleicht weiß ja jemand eine elegantere Lösung?!
 
Hi,

versuchs mal hiermit
Code: 
<style type="text/css">
<!--
    a:link { color:#ffffff; text-decoration:none; }
    a:visited { color:#ffffff; text-decoration:none; }
    a:active { color:#6fC1C1; text-decoration:none; }
    a:hover { color:#6fC1C1; text-decoration:none; }

    a:link img{border: 2px solid #ffffff;}
    a:hover img{border: 2px solid #6fC1C1;}
//-->
</style>
Ciao
Quaese
 
Jetzt stehe ich vor einem neuen Problem.
Ich möchte das Bild neu positionieren, dann funktioniert der Rahmen aber nicht mehr, wenn ich über den Text fahre...

<style type="text/css">
<!--
a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:active { color:#6fC1C1; text-decoration:none; }
a:hover { color:#6fC1C1; text-decoration:none; }

a:link img{border: 2px solid #ffffff;}
a:visited img{border: 2px solid #ffffff;}
a:active img{border: 2px solid #ffffff;}
a:hover img{border: 2px solid #66CCCC;}

.1 { position:absolute; top:300px; left:191px;}
-->
</style>

<body bgcolor="#000000">
<a href="test.htm">test<img class=1 src="../test1.gif" width="70" height="70"></a>
</body>
</html>
 
Hi,

das gleiche Problem hatte ich auch schon. Wenn Du im Ausgangs-Hover height: auto;
angibst, sollte es funktionieren.
Code: 
<style type="text/css">
<!--
a:link { color: #ffffff;
         text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:active { color:#6fC1C1; text-decoration:none; }
a:hover { height: auto; color:#6fC1C1; text-decoration:none; }

a:link img{ border: 2px solid #ffffff;}
a:hover img{ border: 2px solid #6fC1C1;}

.img1{ position:absolute;
       top:300px;
       left:191px;}
//-->
</style>
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück