CSS - Target an element and its sibling upon hover

Question

Quick question for you guys. I know how to use a selector to target an element on hover, and also how to target an elements sibling. Is there a way to combine these?

Dont worry about why I want to do it, long story short, they work better not targeting the parent in this situation.

A good live example of this is the following fiddle.

Fiddle

HTML

<div class="puppy">
    <div class="ducky">
        Boom
    </div>
    <div class="kitty">
        awww, im dead
    </div>
</div>

css

.puppy {width:400px;}

.ducky {position:absolute; left:-120px; width:200px; background-color:blue; margin-left:50%;}

.kitty {position:absolute; left:-60px; width:300px; background-color:red; margin-left:50%;}

.kitty:hover ~ .ducky {color:white;}

In the example above, hovering over kitty should change the color of the words in both kitty and ducky to white (if it worked how I desired.)

I can find another way to do this, but ti seems like it would be more efficient to do it this way if I can get it to work. No Js or jQuery here please. Not needed to accomplish this.

Answer 1

.puppy {width:400px;}

.ducky {position:absolute; left:-120px; width:200px; background-color:blue; margin-left:50%;}

.kitty {position:absolute; left:-60px; width:300px; background-color:red; margin-left:50%;}

.kitty:hover ~ .dog {color:white;}

It looks like David beat me to the punch. Here is a quick example though that I threw together.

http://jsfiddle.net/emersive/58MwP/2/