div Hintergrundfarbe, um onhover zu ändern

91

Ich versuche, die Hintergrundfarbe eines Divs mit der Maus zu ändern .

das div {Hintergrund: weiß;}
das div a: hover {Hintergrund: grau; Breite: 100%;
Bildschirmsperre; Textdekoration: keine;}

Nur der Link innerhalb des Divs erhält die Hintergrundfarbe .

Was könnte ich tun, damit das ganze Div diese Hintergrundfarbe bekommt?

Danke

BEARBEITEN:
Wie kann ich das gesamte Div als Link verwenden - wenn Sie irgendwo auf dieses Div klicken, um zu einer Adresse zu gelangen?

css colors background hover Ionuț G. Stan
quelle
Versuchen Sie diesen Link codebins.com/codes/home/4ldqpc0
gaurang171

Antworten:

117

Das " a:hover" weist den Browser buchstäblich an, die Eigenschaften für das <a>-tag zu ändern , wenn Sie mit der Maus darüber fahren. Was Sie vielleicht meinten, war the div:hoverstattdessen " ", was auslösen würde, wenn das Div ausgewählt wurde.

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

Henrik Paul
quelle
44

Verwenden von 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>
Real Red.
quelle
21

Es ist nicht erforderlich, Anker zu legen. Um den Stil von div beim Hover zu ändern, ändern Sie die Hintergrundfarbe von div beim Hover.

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

In der CSS-Seite

.div_hover { background-color: #FFFFFF; }

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

Legen Sie das Ankertag wie folgt fest, damit das gesamte div als Link fungiert:

display: block

Stellen Sie die Höhe des Ankertags auf 100% ein. Stellen Sie dann eine feste Höhe für Ihr div-Tag ein. Gestalten Sie dann Ihr Ankertag wie gewohnt.

Beispielsweise:

<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!

Shaun
quelle
11

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 wirst du dein div von rot nach blau ändern, indem du darüber schwebst.

user3689455
quelle
5

einstellen

display: block;

auf ein und etwas Höhe geben

Jamol
quelle
3

Versuchen Sie einfach die "Hover" -Eigenschaft von CSS. 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

Tajveer Singh Nijjar
quelle
1

Sie können den Anker einfach um das Div legen.

<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;
}
Nicki
quelle
0

Sie könnten einfach das div in anchor-Tag wie folgt enthalten:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}
<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>
Erweitern Sie das Snippet

trickymind
quelle
-1

Machen Sie einfach die Eigenschaft !importantin Ihrer CSS-Datei, damit sich die Hintergrundfarbe beim Überfahren nicht ändert. Dies hat bei mir funktioniert.

Beispiel:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
T-Jayanth Dore
quelle
Sie sollten versuchen, der Antwort weitere Details beizufügen, da dies die Frage sicherlich nicht vollständig beantwortet.
Tatranskymedved