colore di sfondo div, per cambiare al passaggio del mouse

91

Sto cercando di modificare il colore di sfondo di un div al passaggio del mouse .

il div {background: white;}
il div a: hover {background: gray; larghezza: 100%;
blocco di visualizzazione; text-decoration: none;}

solo il link all'interno del div ottiene il colore di sfondo .

cosa posso fare per fare in modo che l' intero div abbia quel colore di sfondo?

grazie

MODIFICA:
come posso fare in modo che l'intero div agisca da collegamento - quando fai clic in un punto qualsiasi di quel div, per portarti a un indirizzo.

— Ionuț G. Stan
fonte

Prova questo link codebins.com/codes/home/4ldqpc0

— gaurang171

117

Il " a:hover" dice letteralmente al browser di modificare le proprietà per il <a>-tag, quando si passa il mouse su di esso. Quello che forse intendevi era " the div:hover" invece, che si attivava quando veniva scelto il div.

Giusto per essere sicuri, se vuoi cambiare solo un particolare div, dagli un id (" <div id='something'>") e usa invece il CSS " #something:hover {...}". Se vuoi modificare un gruppo di div, trasformali in una classe (" <div class='else'>") e usa il CSS " .else {...}" in questo caso (nota il punto prima del nome della classe!)

— Henrik Paul
fonte

44

Utilizzando 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.
fonte

21

Non è necessario mettere l'ancora. Per cambiare lo stile del div al passaggio del mouse, quindi cambia il colore di sfondo del div al passaggio del mouse.

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

Nella pagina .css

.div_hover { background-color: #FFFFFF; }

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

— Virsj Bhorania
fonte

17

Per fare in modo che l'intero div agisca da collegamento, imposta il tag di ancoraggio come:

display: block

E imposta l'altezza del tag di ancoraggio al 100%. Quindi imposta un'altezza fissa per il tag div. Quindi modella il tuo anchor tag come al solito.

Per esempio:

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

In bocca al lupo!

— Shaun
fonte

11

codice html:

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

codice css:

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

    .nicecolor:hover {
      color:blue;
     }

ed è così che cambierai il tuo div da rosso a blu passandoci sopra.

— user3689455
fonte

5

Impostato

display: block;

su a e dare un po 'di altezza

— Jamol
fonte

3

prova semplicemente la proprietà "hover" dei CSS. per esempio:

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

spero che questo ti aiuti

— Tajveer Singh Nijjar
fonte

1

Puoi semplicemente mettere l'ancora attorno al div.

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

e poi

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

— Nicki
fonte

0

potresti semplicemente contenere il div nel tag di ancoraggio in questo modo:

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>

Espandi lo snippet

— ingannevole
fonte

-1

Basta creare la proprietà !importantnel tuo file css in modo che il colore di sfondo non cambi al passaggio del mouse. Questo ha funzionato per me.

Esempio:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

— T-Jayanth Dore
fonte

Dovresti provare ad allegare qualche dettaglio in più alla risposta, poiché questo sicuramente non risponde pienamente alla domanda.

— Tatranskymedved