98 votes

couleur d'arrière-plan de la div, pour changer la couleur au survol

J'essaie de faire un la couleur d'arrière-plan de la division change au passage de la souris .

the div {background:white;}
le div a:hover{background:grey ; width:100% ;
display:block ; text-decoration:none;}

uniquement le site lien à l'intérieur du div obtient la couleur de fond .

que pourrais-je faire pour que le la div entière a cette couleur de fond ?

Merci.

EDIT :
comment puis-je faire en sorte que la division entière agisse comme un lien - lorsque vous cliquez n'importe où sur cette division, vous êtes dirigé vers une adresse.

0 votes

121voto

Henrik Paul Points 22787

Le " a:hover " indique littéralement au navigateur de modifier les propriétés de l'objet <a> -lorsque la souris passe dessus. Ce que vous vouliez peut-être dire, c'est " the div:hover " à la place, ce qui se déclencherait lorsque la division est choisie.

Juste pour être sûr, si vous voulez changer seulement une div particulière, donnez-lui un id (" <div id='something'> ") et utiliser le CSS " #something:hover {...} "à la place. Si vous voulez éditer un groupe de divs, faites-en une classe (" <div class='else'> ") et utiliser le CSS " .else {...} "dans ce cas (notez le point avant le nom de la classe !).

47voto

Real Red. Points 2153

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

28voto

Virsj Bhorania Points 1

Il n'est pas nécessaire de mettre une ancre. Pour changer le style de la division au survol, il faut Changez la couleur de fond de la division au 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; }

18voto

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

display: block

Et définissez la hauteur de la balise anchor à 100 %. Définissez ensuite une hauteur fixe pour votre balise div. Puis donnez un style à 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 !

11voto

user3689455 Points 1

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 votre div passera du rouge au bleu en le survolant.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X