tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
2917
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 03.10.04 19:38 #1
    Sonador Sonador ist offline Rookie
    Registriert seit
    Oct 2004
    Beiträge
    5
    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
    Geändert von Sonador (03.10.04 um 23:02 Uhr)
     
  2. 03.10.04 23:21 #2
    Sonador Sonador ist offline Rookie
    Registriert seit
    Oct 2004
    Beiträge
    5
    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?!
     
  3. 03.10.04 23:23 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    versuchs mal hiermit
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
  4. 03.10.04 23:31 #4
    Sonador Sonador ist offline Rookie
    Registriert seit
    Oct 2004
    Beiträge
    5
    Ja wunderbar, das funktioniert. Danke.
     
  5. 04.10.04 00:20 #5
    Sonador Sonador ist offline Rookie
    Registriert seit
    Oct 2004
    Beiträge
    5
    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>
     
  6. 04.10.04 10:47 #6
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    das gleiche Problem hatte ich auch schon. Wenn Du im Ausgangs-Hover height: auto;
    angibst, sollte es funktionieren.
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <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 { [B]height: auto;[/B] 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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
  7. 04.10.04 22:50 #7
    Sonador Sonador ist offline Rookie
    Registriert seit
    Oct 2004
    Beiträge
    5
    Auch wenn mir diese Lösung schleierhaft ist, sie funktioniert! Vielen dank nochmals.
     
« position: relative; IE lässt freiraum | CSS Schriftdatei .eot »

Ähnliche Themen

  1. Hover miteinander Verbinden (Link Text & Link Bild)
    Von vodka im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 17.05.10, 13:20
  2. Text bei Hover über Bild
    Von Superdok im Forum CSS
    Antworten: 10
    Letzter Beitrag: 11.11.09, 19:32
  3. Hover bei Text Link soll Bild in Div anzeigen
    Von gnuisnotunix im Forum CSS
    Antworten: 7
    Letzter Beitrag: 04.08.09, 19:51
  4. Bild ändern bei Text-Hover
    Von CantNo im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 03.02.09, 13:43
  5. Bei Hover Bild+Text einblenden
    Von kirchel im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 26.09.06, 14:47