CSS aligerar elementos secundarios en el mouseover principal
Aquí está mi problema.
Tengo un div
que contiene otros dos divs
: básicamente uno para encabezado, uno para contenido.
Me gustaría aligerar (cambiar el nivel alfa, o algún otro método es bienvenido), cuando el usuario apunte el ratón sobre el padre div
. Los colores de ambos hijos divs
deben cambiar y volverse ligeramente más claros. Me gustaría evitar javascript si es posible.
¿Cómo hacer esto en CSS?
25
3 answers
¿Así?
CSS relevante:
#container:hover .inner {
opacity: 0.8
}
HTML:
<div id="container">
<div id="left" class="inner"></div>
<div id="right" class="inner"></div>
</div>
CSS irrelevante:
#container {
width: 300px;
padding: 30px;
overflow: hidden
}
.inner {
width: 40%;
height: 250px;
background: #ccc
}
#left {
float: left
}
#right {
float: right
}
CSS verdaderamente irrelevante:
#container {
background: #fcecfc; /* old browsers */
background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* ie */
}
56
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 21:05:08
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 21:05:08
#div:hover #div1{
color:#lightercolor;
}
#div:hover #div2{
color:#lightercolor;
}
18
Author: Orbit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 20:59:11
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 20:59:11
Puede utilizar # div: hover, tal vez?
#parent_div:hover #child_div_1 { background-color: #333; }
#parent_div:hover #child_div_2 { background-color: #666; }
7
Author: Demelziraptor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 21:01:37
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-04 21:01:37