I follow this example https://stackoverflow.com/a/19122409/2761794
Please view this jsfiddle http://jsfiddle.net/rflfn/pZr3c/
HTML:
<!-- This Works -->
<div class='container'>Mouse Over Here!</div>
<div class='test'>
<div class='text'></div>
</div>
<br />
<!-- This not Work -->
<div class="container1">
<div class='container2'>Mouse Over Here2!</div>
</div>
<div class='test2'>
<div class='text2'></div>
</div>
CSS:
/* This Works */
.test .text:before{
content: 'Text2 Normal';
color: red;
}
.container:hover ~ .test .text:before{
content: 'Text2 Hover';
color: green;
}
/* -------- */
.test2 .text2:before{
content: 'Text2 Normal';
color: red;
}
/* This not Work */
.container1 .container2:hover ~ .test2 .text2:before{
content: 'Text2 Hover';
color: green;
}
/* This not Works too */
/*.container2:hover ~ .test2 .text2:before{
content: 'Text2 Hover';
color: green;
}*/
First Example works perfecly, but second example dont work. I need use this with div inside div, but works only if div the div has not within another div. What's wrong? I would like if possible to use only css to do this.