Change color to a single element

Question

Change color to a single element

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

What I want to do is that, when I move the mouse over a div between several with the same class, it changes color and the others stay with their initial style values.

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

javascript css

asked by Jhonatan 04.06.2017 в 09:51

source

2 answers

1

You must only include the corresponding style within the pseudoclass :hover

Example so that the div turns red when passing the mouse

.cunitario:hover {
    background: red;
}

More information at: : hover - CSS | MDN

Complete example

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

answered by 04.06.2017 в 10:09

Error: An INSERT EXEC statement can not be nested. SQL Server 2008 R2 problems to validate with preg_match and filter_var

score 0 · Accepted Answer

You can do it easily with CSS. Using the pseudo state: hover, which is activated when the mouse passes over the element. Changing the color of an element would be as easy as declaring in the style sheet something like:

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