How to change image on hover in one div by hovering image in another div?

Question

HI

i have 5 divs. suppose ( div class="part1" class="part2" class="part3" class="part4" class="part5" all are floated to left with width:20%) so they are aligned in one line.

Each div contain 2 images suppose image1 with id "top" and image2 with id "bottom"(respectively in all divs).

Now what i do is that i put opacity of all images having id "bottom" to 0 and on hovering on image "top" i change "bottom" opacity to 1 and "top" opacity to 0.

Its working fine till now.

Now what i want is that I want 3rd image in part 1 div with id suppose id="yellow" .

Now when the web loads i want to show "top" id image in part 1.

when the user hovers on part 1 id="top" image i want to show id="bottom" image (till now i am achieving this)

Now if user hovers on part2,part3,part4,part5 i want to show image with id="yellow" in part 1.

I tried using pseudo selectors +, ~ etc but soon i realised that they only work when a div is under the other div or inside a parent div respectively. But in my case PART1 is before part2 so on.. so i cant change order. PS i know its possible with JS jquery but i dont want to use them.

some code

   < div class="part1">
<img1 id="top"></img>  colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
<img3></img>    plain yellow image
</div> 

  < div class="part2">
<img1 id="top"></img> colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
 </div> 
 <div class="part3">
<img1 id="top"></img> colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
</div> 
 < div class="part4">
<img1 id="top"></img> colored image with happy child
 <img2 id="bottom"></img> yellow image with sad child
 </div>  
  < div class="part5">
 <img1 id="top"></img> colored image with happy child
 <img2 id="bottom"></img> yellow image with sad child
  </div> 

now i want to show yellow id image in part 1 when i hover on part2- part5 iE i dont want to show images with id top and bottom respectively only in part1 just tha image with id yellow

Answer 1

This is a bit hacky maybe and might not be suitable for your case, but since you have only one yellow part, you can use the parent's hover to display the yellow and override that when actually hovering part1.

.yellow {
    background: yellow;
    display: none;
}
.parts:hover .yellow {
    display: block;
}
.parts .part1:hover .yellow {
    display: none;
}

DEMO with half-size boxes. DEMO with full-size boxes.

Answer 2

UPDATE!

Now if you move the cursor from part2 directly back to part1, the yellow part disappears. Fixed using a fake transparent element which captures the hover of the yellow pseudo element.

---

You need a container element.

Demo here: http://codepen.io/abidibo/pen/LEMGQY

HTML code

<div class="container">
  <div class="part1">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="fake"></div>
  </div>
  <div class="part2">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part3">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part4">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part5">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

CSS

.container {
  position:relative;
}
.fake {
  z-index: 1001;
  background: transparent;
}
div[class^=part] {
  float: left;
  width:20%;
  height:100px;
  position: relative;
}
div[class^=part] > div, .fake {
  height: 100px;
  width: 100%;
  position: absolute;
}
div[class^=part]:hover .top {
  opacity: 0;
}
div[class^=part]:hover .bottom {
  opacity: 1;
}
.top {
  background: blue;
}
.bottom {
  background: red;
  opacity: 0;
}
.part2:hover:before, .part3:hover:before, .part4:hover:before, .part5:hover:before {
  content: '';
  color: #000;
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100px;
  background: yellow;
  z-index: 1000;
}
.part3:hover:before {
  left: -200%;
}
.part4:hover:before {
  left: -300%;
}
.part5:hover:before {
  left: -400%;
}

And finally, just a suggestion. Is not a good practice, actually it is wrong, to use same id attributes inside the same document, use classes instead. IDS should be unique.