2

Lo que quiero hacer es que, al pasar el ratón por un div entre varios con la misma clase, éste cambie de color y los demás se queden con sus valores iniciales de estilo.

.cunitario{position:relative;float:left;margin:0.5% 1.5%;height:250px; width:250px;border:solid 2px #000;background:rgba(100,100,100,0.9)}
.cunombre{position:relative;margin:85% 0% 0%; height:15%;width:100%;background: #000;}
<html>
<head>
</head>
<body>

<div class="contenedor">
	
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	
</div>

</body>

</html>

1
  • Si bien se entiende la pregunta, sería recomendable que aclares sobre qué elementos de qué clase debería ocurrir, y qué estilo debería aplicarse.
    – Mariano
    Commented el 4 jun. 2017 a las 8:15

2 respuestas 2

1

Solo debes incluir el el estilo correspondiente dentro de la pseudoclase :hover

Ejemplo para que el div se vuelva rojo al pasar el mouse

.cunitario:hover {
    background: red;
}

Más información en: :hover - CSS | MDN

Ejemplo completo

.cunitario {
    position: relative;
    float: left;
    margin: 0.5% 1.5%;
    height: 250px;
    width: 250px;
    border: solid 2px #000;
    background: rgba(100,100,100,0.9)
}

.cunitario:hover {
    background: red;
}

.cunombre {
    position:relative;
    margin:85% 0% 0%;
    height:15%;
    width:100%;
    background: #000;
}
<html>
<head>
</head>
<body>

<div class="contenedor">
	
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	<div class="cunitario">
		<div class="cunombre"></div>	
	</div>
	
</div>

</body>

</html>

0

Puedes hacerlo fácilmente con CSS. Usando el pseudoestado :hover, que se activa cuando el mouse pasa sobre el elemento. Cambiar el color de un elemento seria tan facil como declarar en la hoja de estilos algo como:

.miclase:hover{
  //Y lo que pongas aqui se ejecutara cuando el mouse pase por encima de ese elemento
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.