• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

A:hover

korbmeister

korbmeister

Neues Mitglied
Hey ich habe mal eine Frage es gibt ja das css Attribut a:hover das wen man über nen Link mit der Maus fährt das sich die Farbe oder so ändert. Soweit ich weiss kann man dieses Attribut nur in ner externen Css Datei benutzen? Wen nicht bitte korrigieren. Nun habe ich ein Problem das ich 2 verschiedene a:hover brauche also wen ich mit der Maus über das element fahre wird es z.B weiss und bei dem anderen schwarz wie krieg ich das hin?Ps: Mir ist gerade aufgefallen das der Thread wohl doch er ins Css Forum gehört sry :/
 
Indem du beiden Ankern unterschiedliche Id's gibst und denen unterschiedliche Styles zuordnest, grob so:
HTML: 
<style ...>
#a1 { color:red };     #a1:hover { color:black};
#a2 { color:blue };    #a2:hover { color:green};
</style>
...
<body>
...
<a id="a1" href="#">rot-schwarz</a><br/>
<a id="a2" href="#">blau-grün</a><br/> 
...
</body>
Kannst auch zwei Klassen statt dessen definieren.
 
Zuletzt bearbeitet:
hover kannste ganz normal ins CSS-Script im Head setzen.
Allerdings verstehe ich die Frage nicht ganz.
Du haste einen Text, der beim öffnen der Seite zb. Blau ist. Wennde drüber fährst soll er weiß werden und wennde wieder runter gehst soll er schwarz sein?
Oder willste 2 verschiedene Texte unterschiedlich hovern und hast das Problem, dass du mit a:hover ja überall auf der Seite den gleichen Effekt erziehlst?

Für den Ersten Fall kann ich nicht helfen, für letzteres geht es recht fix.
Setze für hover einfach eine class.

Ich seh grad, gibt schon einen Vorschlag. Hier dann meine Lösung.
HTML: 
<style ... >
.textweiss a{
    /*textstil definieren*/
    color: #00f; 
}
.textweiss a:hover{
    /*textstil definieren*/
    color: #fff;
}
.textschwarz{
    /*textstil definieren*/
    color: #00f; 
}
.textschwarz a:hover{
    /*textstil definieren*/
    color: #000;
}
</style>
<body>
<div class="textweiss"><a href="link1.html">Link 1</a></div>
<div class="textschwarz"><a href="link2.html">Link2</a></div>
</body>

Statt <div> kannste auch alternativen nehmen. z.b. <td class="text..."></td>
 
NetAktiv schrieb:
Kannst auch zwei Klassen statt dessen definieren.
Zum Vergrößern anklicken....

Ja, besser Klassen, wenn es keinen besonderen Grund für IDs gibt.

Rippie schrieb:
Statt <div> kannste auch alternativen nehmen. z.b. <td class="text..."></td>
Zum Vergrößern anklicken....

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">
        .textweiss {
            /*textstil definieren*/
            color: #00f;
        }
        .textweiss:hover{
            /*textstil definieren*/
            color: #fff;
        }
        .textschwarz {
            /*textstil definieren*/
            color: #00f;
        }
        .textschwarz:hover{
            /*textstil definieren*/
            color: #000;
        }
        </style>
    </head>


    <body>

        <p>
            <a class="textweiss"   href="link1.html">Link 1</a>
            <a class="textschwarz" href="link2.html">Link2</a>
        </p>

    </body>

</html>

textweiss und textschwarz sind übrigens keine guten Bezeichner, da sie sich auf die konkrete Formatierung beziehen, nicht auf die semantische Bedeutung. odd/even, alternate1/alternate2, important/unimportant wären besser.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben