0

i wanna make child div effect outer div , i want box1 to change middle div box2 bg to something else , how can i do that without scripts i did try and fail to #box:hover ~ #box2 also fail with "+" 

<div class="father">  
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>                



<div id="box2" class="father2"> change this background </div>


<div class="father">
       <div class="child2">
                <div id="box1" class="child3"> hover here </div>
       </div>  

 </div>
Natanel Soussana
  • 1
  • 2
    Unfortunately, with CSS only, it is currently impossible to select parent elements. You will need to go with a scripting language such as jQuery/Javascript. If you would like an example of how to do this, just ask :) – Fizzix May 07 '14 at 23:03
  • #box1 (ID) can be used only once per document, uses .box1 (CLASS) instead. Javascript will do what you wish to :) Else , for the fun and the use of pointer events : http://codepen.io/gc-nomade/pen/bjcql – G-Cyrillus May 07 '14 at 23:12
  • 1
    @fizzix check this for the fun and the curiosity http://codepen.io/gc-nomade/pen/bjcql – G-Cyrillus May 07 '14 at 23:22
  • Quite interesting, wasn't aware of that, thanks for the example @GCyrillus. Although, why does it stop working if the `box2` is moved above `father`? – Fizzix May 07 '14 at 23:31
  • @fizzix If box2 is moved above , CSS selector cannot access it, you can only navigate down the dom tree :) – G-Cyrillus May 07 '14 at 23:34

2 Answers2

1

This answer is more for the curiosity than a real solution.

If your nested box stands inside a div preceding in the flow, the box you want to see background being updated , you may use pointer-events to control area that will react to hover.

Remenber: CSS selectors can only navigate down the DOM tree, climbing up is not possible.

DEMO

Basic CSS would be : 

div {
  pointer-events:none;
}
div #box1 {
  pointer-events:auto;
}
div:hover + div {
  background:red;
}

for :

<div class="father">  
  <div class="child2">
    <div id="box1" class="child3"> hover here </div>
  </div>  
</div>                
<div id="box2" class="father2"> 
  change this background 
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • is that will work with multiply boxes ? i gonna make small divs that will be the character thumbs , and each character we hover on , the middle picture will change :) – Natanel Soussana May 07 '14 at 23:25
  • if the background to change stands next in the flow and if browser supports pointer-events, it should work. – G-Cyrillus May 07 '14 at 23:28
  • It won't work if the DOM is slightly changed though. In your example, move the `box2` above the `father`, and it will stop working. – Fizzix May 07 '14 at 23:30
  • @fizzix this is what i tell. selector avalaible are only + or ~to navigate down the dom tree. and the selector to climb up will surely not be supported (it would involved too much ressource as i understood) – G-Cyrillus May 07 '14 at 23:32
  • Ahhh, interesting. So `+` can be used to work down the tree, although there is no selector (yet) that can work up the tree? – Fizzix May 07 '14 at 23:34
  • Nop the selector !>is not going to be avalaible i guess. pointer-eevents first worked in FF i believe, today it include FF, Chrome and IE11 :) – G-Cyrillus May 07 '14 at 23:36
  • Yeah, all major browsers have had them for quite some time, but IE only supports them in version 11+ unfortunately. – Fizzix May 07 '14 at 23:55
0

First, don't label with javascript or jquery if you don't want to use scripting...

You cant have two divs (or anything) with the same ID, if you want to have two of something use classes, it doesn't matter if they are identical. Only the first one (I think, it might be the last one...) is used and the others are ignored.

Answering the question

The + combinator only works on siblings i.e. they have to be in the same div together not nested in any other div and they have to be directly one after another so .father:hover + .father2 works only for the first div. You could use ~ instead of + if there is some other elements between .father and .father2.

So that answers the question partially, I don't know how to get the second one to work.

Try this question for additional help

Community
  • 1
  • 1
john
  • 157
  • 2
  • 6
  • have you checked my demo with selector + ? http://codepen.io/gc-nomade/pen/bjcql pointer-events is involved , so you need a browser that gets it:) – G-Cyrillus May 07 '14 at 23:29
  • i think i will let my brother write me a script :/ im afraid this will not work good with my example of my needs : http://i62.tinypic.com/2lj0yfn.jpg – Natanel Soussana May 07 '14 at 23:44
  • @GCyrillus Sorry for the delay, I haven't been on SO for a while. I hadn't heard of pointer-events before. After looking over your css I think that I understand the principle. (You posted your answer first, but I started writing mine before anyone had posted any answers so I didn't read your answer before posting mine) – john May 12 '14 at 08:16