0

What I'm trying to do is get image B to appear when image A is hovered over.

Here's the hover properties I'm using img.a:hover img.b {opacity:1;}

The problem is.. these elements aren't in the same parent. Here's a jsfiddle. http://jsfiddle.net/LquGC/

I understand that it's not in the same parent but I don't understand why CSS was designed this way. Does anybody know any workarounds for this?

little tiny man
  • 789
  • 4
  • 10
  • 26
  • Possible Duplicate of http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-effect-a-different-element – Jatin Feb 14 '14 at 00:53
  • So am I out of options? I want my page positioned the way I have but moving around the elements till they're siblings badly breaks my page.. – little tiny man Feb 14 '14 at 01:35
  • This is What you are looking for http://stackoverflow.com/questions/10983380/how-do-i-change-image-a-when-hovering-over-image-b-without-javascript-only-css – Jatin Feb 14 '14 at 01:40

1 Answers1

1

Unfortunately CSS will only effect siblings or children. It can't navigate to its parent's sibling. So there is no pure CSS fix for this.

Here are two ways that may work for you. You can keep your current HTML and use JS to make the hover work, or change your HTML and use CSS hover states.

HTML reorder fiddle:

HTML:

 <div class="wrapper">
    <div class="group1">
         <img class="a" src="http://imgur.com/Y7Cz2Q3.jpg">
         <img class="b" src="http://imgur.com/MMZwSdO.jpg">             
    </div>
    <div class="group2">
         <img class="c" src="http://imgur.com/HHbpx0w.jpg">
         <img class="d" src="http://imgur.com/Q9LfCwH.jpg">     
    </div>
</div>

CSS:

.b, .d {
    opacity:0;
    transition: .3s;
    }
img {display: block;}   
.wrapper > div {display: inline-block;}

.group1:hover .b {
    opacity:1;
}

.group2:hover img.d {
    opacity:1;
}

JQUERY fiddle:

JS:

$('.a').hover(
    function () {
        $('.b').css('opacity','1');
    }, function () {
        $('.b').css('opacity','0');
});
$('.c').hover(
    function () {
        $('.d').css('opacity','1');
    }, function () {
        $('.d').css('opacity','0');
});

CSS:

.b,.d {
    opacity: 0;
}
badAdviceGuy
  • 2,060
  • 1
  • 16
  • 12