2009-03-24 14 views
75

Sto provando a fare un cambiamento di colore di sfondo dello div sul mouse su.div colore di sfondo, per cambiare onhover

div {background: white;}
il div a: hover {background: grigio; width: 100%;
display: blocco; text-decoration: none;}

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

Cosa posso fare per rendere il div dello intero colore di sfondo?

grazie

EDIT:
come posso fare tutto il div di agire come un link - quando si fa clic su un punto qualsiasi che div, che vi porterà a un indirizzo.

+0

Prova questo link http://codebins.com/codes/home/4ldqpc0 – gaurang171

risposta

102

"a:hover" indica letteralmente al browser di modificare le proprietà per il tag <a>, quando il mouse viene posizionato su di esso. Quello che forse intendevi era "the div:hover", che si innesca quando viene scelto il div.

Giusto per essere sicuri, se si desidera cambiare solo un particolare div, dargli un ID ("<div id='something'>") e utilizzare il CSS "#something:hover {...}" invece. Se si vuole modificare un gruppo di div, trasformarli in una classe ("<div class='else'> ') e usare il CSS' .else {...}" in questo caso (si noti il ​​punto prima del nome della classe!)

36

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

Set

display: block; 

su un e dare una certa altezza

16

Per rendere l'intero atto div come al inchiostro, imposta il tag di ancoraggio come:

display: block 

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

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

Buona fortuna!

1

Si può 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; 
} 
17

Non v'è alcuna necessità di 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; } 
3

semplicemente provare "hover" proprietà dei CSS. ad 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 vi aiuterà

9

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

e thats come youll cambiare il tuo div dal rosso al blu passandoci sopra.

Problemi correlati