todas - css title style
color de fondo div, para cambiar el lugar (9)
Estoy intentando hacer que el color de fondo de un div cambie con el mouse .
el div {fondo: blanco;}
el div a: hover {fondo: gris; ancho: 100%;
bloqueo de pantalla; texto-decoración: ninguno;}
solo el enlace dentro del div obtiene el color de fondo .
¿Qué podría hacer para que todo el div obtenga ese color de fondo?
gracias
EDITAR:
¿Cómo puedo hacer que todo el div actúe como un enlace? Cuando haces clic en cualquier parte de ese div, para llevarte a una dirección.
¡Solo haga la propiedad !important en su archivo css para que el color de fondo no cambie con el mouse. Esto funcionó para mí.
Ejemplo:
.fbColor {
background-color: #3b5998 !important;
color: white;
}
Conjunto
display: block;
en una y da algo de altura
No hay necesidad de anclar. Para cambiar el estilo de div al desplazarse, cambia el color de fondo de div al desplazarse.
<div class="div_hover"> Change div background color on hover</div>
En la página de .css
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }
Para hacer que todo el div actúe como un enlace, configure la etiqueta de anclaje como:
display: block
Y establezca su altura de la etiqueta de anclaje al 100%. Luego, establezca una altura fija en su etiqueta div. Luego, diseñe su etiqueta de anclaje como siempre.
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..com"></a>
</div>
<div class="link-container">
<a href="http://www..com"></a>
</div>
</body> </html>
¡Buena suerte!
Puedes simplemente poner el ancla alrededor del div.
<a class="big-link"><div>this is a div</div></a>
y entonces
a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}
Usando 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>
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 así es como podrás cambiar tu div de rojo a azul al pasar el cursor sobre él.
simplemente intente con la propiedad "hover" de CSS. p.ej:
<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 sea de ayuda
El " a:hover " literalmente le dice al navegador que cambie las propiedades de la etiqueta <a> , cuando el mouse está sobre ella. Lo que quizás quiso decir fue " the div:hover " en su lugar, que se activaría cuando se eligiera el div.
Solo para asegurarse de que, si desea cambiar solo un div en particular, proporcione un id (" <div id=''something''> ") y use el CSS " #something:hover {...} ". Si quiere editar un grupo de div, conviértalos en una clase (" <div class=''else''> ") y use el CSS " .else {...} " en este caso (tenga en cuenta el período anterior a la clase) '' ¡nombre!)