div Hintergrundfarbe zu ändern onHover

StackOverflow https://stackoverflow.com/questions/676324

  •  21-08-2019
  •  | 
  •  

Frage

Ich versuche, eine div Hintergrundfarbe ändern auf der Maus zu machen über .

  

die div {background: white;}
  die div a: Hover {background: gray; Breite: 100%;
  Bildschirmsperre; text-decoration: none;}

nur Link innerhalb des div wird die Hintergrundfarbe .

Was könnte ich tun, die ganze div, dass die Hintergrundfarbe erhalten zu machen?

Danke

EDIT:
wie kann ich das ganze div als Link zu handeln -., wenn Sie irgendwo auf diesem div klicken Sie auf eine Adresse zu nehmen

War es hilfreich?

Lösung

Die „a:hover“ erzählt wahrsten Sinne des Wortes den Browser die Eigenschaften für das <a>-Tag zu ändern, wenn die Maus über sie schwebte wird. Was Sie vielleicht gemeint war „the div:hover“ statt, das auslösen würde, wenn das div gewählt wurde.

Nur um sicherzugehen, wenn Sie nur eine bestimmte div ändern möchten, geben Sie ihm eine ID ( „<div id='something'>“) und verwenden Sie die CSS „#something:hover {...}“ statt. Wenn Sie eine Gruppe von divs bearbeiten möchten, so dass sie in eine Klasse machen ( „<div class='else'>“) und verwenden Sie die CSS „.else {...}“ in diesem Fall (man beachte die Zeit vor der Klasse Name!)

Andere Tipps

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>

Es gibt keine Notwendigkeit Anker zu setzen. Um Stil div auf schweben zu ändern dann Ändern Sie Hintergrundfarbe von div auf schweben. 

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

.css Seite 

.div_hover { background-color: #FFFFFF; }

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

Um die ganze div fungiert als Bindeglied zu machen, setzen Sie den Anker-Tag wie: 

display: block

Und Ihre Höhe des Anker-Tag auf 100% gesetzt. Dann stellen Sie eine feste Höhe zu Ihrem div-Tag. Dann wird Ihr Anker-Tag wie gewohnt stylen.

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!

HTML-Code: 

    <!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 das ist, wie youll Ihre div zu Blau von Rot ändern, indem Sie schwebt über ihm.

Set 

display: block;

auf a und etwas Höhe geben

einfach versuchen „schweben“ Eigenschaft von CSS. zB: 

<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, dass dies helfen wird,

Sie können nur den Anker setzen um die div. 

<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;
}

Sie einfach die Eigenschaft !important in Ihrer CSS-Datei, so dass die Hintergrundfarbe ändert für mich gearbeitet Maus over.This doesnot.

Beispiel: 

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top