Text-Decoration.....usw



  • Hi... Hab mit CSS am anfang der Page die Hover und so Definiert....

    A:LINK {TEXT-DECORATION: NONE; COLOR: #990000; FONT-FAMILY: ARIAL, VERDANA;}
    
    A:VISITED {TEXT-DECORATION: NONE; COLOR: #990000; FONT-FAMILY: ARIAL, VERDANA;}
    
    A:ACTIVE {TEXT-DECORATION: NONE; COLOR: #990000; FONT-FAMILY: ARIAL, VERDANA;}
    
    A:HOVER {TEXT-DECORATION: NONE; COLOR:#FFCC00; FONT-FAMILY: ARIAL, VERDANA;}
    

    So dann hab ich bilder eingefügt die als Links Fungieren!
    Dann habe ich es auch endlich hinbekommen, dass sich die Bilder ändern beim Überfahren(mouseover) ....Problem:

    Immer wenn man jetz über den Button(oder das Bild) fährt, wird das unterstrichen...Wenn man das Bild oder den Button wieder verlässt mit der Maus ist es nett mehr Unterstrichen....Warum wird es denn unterstrichen???

    Hab das doch ausgestellt mit dem CSS oder net???



  • Vielleicht liegt es an der Reihenfolge:

    Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die folgende Reihenfolge einhalten:
    :link, :visited, :hover, :active.



  • Ne klappt immer noch nicht. Hab das so gemacht.
    Die anderen (normalen Links) gehen ja, also die ändern sich so wie ich das halt eingestellt hab. Nur die Bilder sind immer Unterstrichen....

    Muss ich das eigendlich mit Bildern machen, diesen Mouseovereffekt??? Kann ich nicht auch die Gleiche Schriftart nehmen, und dann einen Hover einstellen (nur für das Menue) das Die schrift bleibt, aber umrandet ist?
    Also ich hab immer 2 Bilder gemacht. z.B.

    MAIN (Bild 1 in roter Schrift); [MAIN] (Bild2 -->Ist beim Überfahren mit der maus dann Grau umranded)....

    Gibts das bei CSS??? Also es soll sich nicht nur die Schriftfarbe ändern, sondern die soll bleiben aber zusätzlich soll das dann Umrandet sein... So nen Neon Effekt ist das oder?



  • img.main {
     border: 0px;
     width: 75%;
     height: 75%;
     padding: 2px;
    }
    
    img.main:hover {
     border: 1px solid #ccc;
     background-color: #ccc;
     width: 76%;
     height: 76%;
     padding: 2px;
    }
    
    <img class="main" src="bilder/bild1.png" alt="Kinderschokolade" />
    

    Und: Schreib die Bezeichner klein!


Anmelden zum Antworten