wake-up-neo.com

div Hintergrundfarbe, um onhover zu ändern

Ich versuche, die Hintergrundfarbe eines div zu ändern, wenn ich mit der Maus über gehe.

die Div {Hintergrund: weiß;}
the div a: schwebe {Hintergrund: grau; Breite: 100%;
Bildschirmsperre; Textdekoration: keine;}

nur der Link innerhalb des div erhält die Hintergrundfarbe .

was könnte ich tun, damit die ganze Div diese Hintergrundfarbe bekommt?

dankeschön

EDIT:
wie kann ich die ganze div als link fungieren lassen - wenn du irgendwo auf diese div klickst, um dich zu einer adresse zu bringen.

csscolorsbackgroundhover
86
Ionuț G. Stan

Das "a:hover" Weist den Browser an, die Eigenschaften für das <a> - Tag zu ändern, wenn der Mauszeiger darüber bewegt wird. Was Sie vielleicht meinten, war stattdessen "the div:hover", Das ausgelöst würde, wenn das div ausgewählt wurde.

Um sicherzugehen, dass Sie nur ein bestimmtes Div ändern möchten, geben Sie ihm eine ID ("<div id='something'>") Und verwenden Sie stattdessen das CSS "#something:hover {...}". Wenn Sie eine Gruppe von Divs bearbeiten möchten, machen Sie sie zu einer Klasse ("<div class='else'>") Und verwenden Sie in diesem Fall das CSS ".else {...}" (Beachten Sie den Punkt vor dem Klassennamen! )

109
Henrik Paul

Mit Javascript

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 
    </div>
42
Real Red.

Es besteht keine Notwendigkeit, Anker zu setzen. Um den Div-Stil beim Hover zu ändern, ändern Sie die Hintergrundfarbe des Div beim Hover.

<div class="div_hover"> Change div background color on hover</div>

Auf der CSS-Seite

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }
20
Virsj Bhorania

Damit das gesamte Div als Verknüpfung fungiert, legen Sie das Ankertag wie folgt fest:

display: block

Stellen Sie die Höhe des Anker-Tags auf 100% ein. Stellen Sie dann eine feste Höhe für Ihr div-Tag ein. Dann gestalten Sie Ihr Anker-Tag wie gewohnt.

Zum Beispiel:

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

Viel Glück!

16
Shaun

hTML Quelltext:

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

cSS-Code:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

und so kannst du dein div von rot auf blau ändern, indem du darüber schwebst.

10
user3689455

Einstellen

display: block;

on a und gib etwas Höhe an

5
Jamol

probieren Sie einfach die Eigenschaft "hover" von CSS aus. z.B:

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

ich hoffe, das wird helfen

3
Tajveer Singh Nijjar

Sie können einfach den Anker um die Div setzen.

<a class="big-link"><div>this is a div</div></a>

und dann

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}
1
Nicki