2009-03-24 21 views
75

Estoy tratando de hacer un cambio de color de fondo de div en el mouse sobre.div color de fondo, para cambiar onhover

el div {background: white;}
el div a: hover {background: gris; ancho: 100%;
pantalla: bloque; text-decoration: none;}

única la enlace dentro del div obtiene el color de fondo.

¿Qué podría hacer para que el div completo obtenga ese color de fondo?

gracias

EDIT:
cómo puedo hacer que todo el div para actuar como un enlace - cuando se hace clic en cualquier lugar en que div, que le llevará a una dirección.

+0

Pruebe este enlace http://codebins.com/codes/home/4ldqpc0 – gaurang171

Respuesta

102

El "a:hover" literalmente le dice al navegador que cambie las propiedades del <a> -tag, cuando el mouse está sobre él. Lo que quizás quiso decir fue "the div:hover", que se activaría cuando se eligió el div.

Solo para asegurarse, si quiere cambiar solo un div en particular, asígnele un id ("<div id='something'>") y use el CSS "#something:hover {...}" en su lugar. Si desea editar un grupo de divs, convertirlos en una clase ("<div class='else'> ') y el uso de la CSS' .else {...}" en este caso (observe el punto antes del nombre de la clase!)

36

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

conjunto

display: block; 

en un y darle una cierta altura

16

Para que todo el div actúan como colaboradores tinta, establezca la etiqueta de anclaje como:

display: block 

Y establezca su altura de la etiqueta de anclaje al 100%. Luego configure una altura fija para su etiqueta div. Luego, diseñe su etiqueta de anclaje como de costumbre.

Por ejemplo:

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

Buena suerte!

1

Simplemente puede colocar el ancla alrededor del div.

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

y luego

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

No hay necesidad de poner el ancla.Para cambiar el estilo de div al pasar el cursor, Cambia el color de fondo de div al desplazarse.

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

En la página Css

.div_hover { background-color: #FFFFFF; } 

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

simplemente tratar de propiedad "flotar" de CSS. por ejemplo:

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

espero que esto ayudará

9

código html:

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

código CSS:

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

    .nicecolor:hover { 
     color:blue; 
    } 

y esa es la forma interminables cambiar su div de rojo a azul al pasar el cursor sobre ella.

Cuestiones relacionadas