1

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.

Community
  • 1
  • 1
rafaelfndev
  • 669
  • 7
  • 22

1 Answers1

1
.container1 .container2:hover ~ .test2 .text2:before

It doesn't work because .container2 isn't a sibling element of .test2. Its parent, .container1, is a sibling therefore the following would work:

(~ is a general sibling combinator - it only looks at sibling elements.)

.container1:hover ~ .test2 .text2:before{
    content: 'Text2 Hover';
    color: green;
}

I'm afraid what you're trying to do isn't possible in pure CSS since you can't transverse the DOM and there are no parent selectors present. You would need JS to do that.

Community
  • 1
  • 1
Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
  • View this attempt: http://jsfiddle.net/rflfn/pZr3c/1/ little issue, view this other: http://jsfiddle.net/rflfn/pZr3c/2/ works on tag body, but dont work on any other tag... i try this: http://jsfiddle.net/rflfn/pZr3c/3/ but dont work too, If there is no possible way to do this with CSS, you have any other suggestions? – rafaelfndev May 09 '14 at 21:53
  • Works perfectly on example, but don't work for what I need, view this: http://jsfiddle.net/rflfn/XLkRz/ check css, I need change text and color on mouse over, but dont work... – rafaelfndev May 10 '14 at 05:01
  • @rflfn Yea, it doesn't work because the HTML is different. Here is a jQuery solution - http://jsfiddle.net/625cc/ – Josh Crozier May 10 '14 at 15:48
  • Thanks for you help! Your solution worked perfectly with Jquery, but am trying not to use any JS code in my theme in any manner thank you! I will guard it for another occasion. – rafaelfndev May 14 '14 at 13:46