Rollover-Link soll Hintergrundfabe ändern

suse28

Hallo,

ich habe hier einen div-Bereich mit einem Link. Beim rollover über den Link sollen die Linkfarbe und die Hintergrundfarbe ausgetauscht werden.

aktuell: Link: gelb, Hintergrund: rot
rollover: Link rot, Hintergrund: gelb

Wie mach ich das am besten??

Die div-Box soll bildschirmfüllend sein, das geht noch nicht mit der Höhe, aber das ist dann ein anderes Problem.

Danke!

HighFlyer

Code

a:link{
color:yellow;
background-color: red;


a:hover{
color: red;
background-color:yellow;

Zitat

Die div-Box soll bildschirmfüllend sein, das geht noch nicht mit der Höhe, aber das ist dann ein anderes Problem.

http://www.ohne-css.gehts-gar.net/0025.php

suse28

Danke HighFlyer!

Funktioniert bei mir nur leider nicht, die Änderung der Hintergrundfarbe bezieht sich ja da nur auf den Link, nicht auf die ganze Div-Box.

HighFlyer

Wofür brauchst du den div um den Link bzw. wie soll dein Layout des Links/divs genau aussehen?

gelöschter User

ok das ist kein problem

Code

#Layer1 {
background-color: yellow;
color:red;
}


#Layer1 div:hover{
color:yellow;
background-color: red;
}

so sollte es funktionieren
ich habe deinem Layer1 nochmal die Farbe und die hintergrund Farbe definiert kannste ja wieder löschen falls dus nicht brauchst

mfg

HighFlyer

@Josi: Ich glaube nicht, dass der div überhaupt notwendig ist für das Vorhaben. Bei deiner Lösung würde ich dem Link noch ein display:block hinzufügen.

gelöschter User

wenn suse28 das nu mit nem div machen will hab ich ihr hingeschrieben wies mit div geht

DarkSyranus

Also ich habs jetzt mal so gemacht wie aus dem ersten Post gelsen, bin zwar ein wenig verwundert über Sinn und Zweck der Sache, aber egal.
Außerdem wollte ich schon lange mal das html-Tag ausprobieren

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- page title -->
        <title>Link</title>



        <!-- simple stylesheet -->
        <style type="text/css">
            body, html
            {                
                height: 100%;
                margin: 0px;
                padding: 0px;

            }

            #overallLink
            {
                background-color: red;
                color: yellow;
                display: block;
                height: 100%;
            }

            #overallLink:hover
            {
                background-color: yellow;
                color: red;
            }
        </style>
    </head>


    <body>
        <a href=#" id="overallLink">Link</a>
    </body>
</html>

Alles anzeigen

Tags