couleur d'arrière-plan div, pour changer en survol

91

J'essaye de faire changer la couleur d'arrière-plan d' un div en passant la souris .

le div {background: white;}
le div a: hover {background: gray; largeur: 100%;
bloc de visualisation; texte-décoration: aucun;}

seul le lien à l'intérieur du div obtient la couleur d'arrière-plan .

que puis-je faire pour que la division entière obtienne cette couleur d'arrière-plan?

Merci

EDIT:
comment puis-je faire en sorte que le div entier agisse comme un lien - lorsque vous cliquez n'importe où sur ce div, pour vous amener à une adresse.

Ionuț G. Stan
la source
Essayez ce lien codebins.com/codes/home/4ldqpc0
gaurang171

Réponses:

117

Le " a:hover" indique littéralement au navigateur de modifier les propriétés de <a>-tag, lorsque la souris passe dessus. Ce que vous vouliez peut-être dire était " the div:hover" à la place, qui se déclencherait lorsque le div était choisi.

Juste pour être sûr, si vous ne voulez changer qu'un seul div particulier, donnez-lui un id (" <div id='something'>") et utilisez le CSS " #something:hover {...}" à la place. Si vous souhaitez éditer un groupe de divs, transformez-les en classe (" <div class='else'>") et utilisez le CSS " .else {...}" dans ce cas (notez le point avant le nom de la classe!)

Henrik Paul
la source
44

Utiliser 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.
la source
21

Il n'est pas nécessaire de mettre l'ancre. Pour changer le style de div en survol, changez la couleur d'arrière-plan de div en survol

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

Dans la page .css

.div_hover { background-color: #FFFFFF; }

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

Pour que le div entier agisse comme un lien, définissez la balise d'ancrage comme suit:

display: block

Et définissez votre hauteur de la balise d'ancrage à 100%. Ensuite, définissez une hauteur fixe pour votre balise div. Puis stylisez votre balise d'ancrage comme d'habitude.

Par exemple:

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

Bonne chance!

Shaun
la source
11

Code HTML:

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

code css:

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

    .nicecolor:hover {
      color:blue;
     }

et c'est ainsi que vous changerez votre div du rouge au bleu en le survolant.

user3689455
la source
5

Ensemble

display: block;

sur un et donner de la hauteur

Jamol
la source
3

essayez simplement la propriété "hover" de CSS. par exemple:

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

j'espère que cela aidera

Tajveer Singh Nijjar
la source
1

Vous pouvez simplement mettre l'ancre autour du div.

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

puis

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}
Nicki
la source
0

vous pouvez simplement contenir le div dans la balise d'ancrage comme ceci:

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>

esprit trompeur
la source
-1

!importantCréez simplement la propriété dans votre fichier css pour que la couleur d'arrière-plan ne change pas au survol de la souris. Cela a fonctionné pour moi.

Exemple:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
T-Jayanth Dore
la source
Vous devriez essayer d'attacher plus de détails à la réponse, car cela ne répond certainement pas complètement à la question.
Tatranskymedved