CSS: Hover over one element, effect another? [duplicate]

Question

Please see the page here:

http://176.32.230.17/printingcrazy.com/branding-services

I'm trying to achieve a hover effect, so if you hover over any of the services listed, the relevant image will have a border for example.

And if you hover over the Image, the relevant text will change color.

Elements on the left are in a separate parent to the ones on the right.

Yes I have seen CSS: Hover one element, effect for multiple elements? and have tried everything, but cannot get it to apply to my circumstances.

Any help would really be appreciated!

<div class="servicepage">

<div class="serviceleft">
<img src="/digitalprint.jpg">
<img src="/dyesub.jpg">
</div>

<div class="serviceright">
<ul>
<li>
<h3>Digital Print</h3>
</li>
<li>
<h3>Dye Sublimation</h3>
</li>
</ul>
</div>

</div>

Answer 1

here is a simplified example. hope it helps you get started.

basically we are setting callback functions when the mouse is hovered and left on the div foo. And in those functions we are changing the css properties of the img, in this case, adding a border and removing it.

http://jsfiddle.net/btevfik/YC2tg/

JQUERY

$(document).ready(function () {
    $(".foo").hover(function () {
        $(".bar").css("border", "5px red solid");
    });
    $(".foo").mouseleave(function () {
        $(".bar").css("border", "none");
    });
});

HTML

<div class="foo">HOVER HERE</div>
<img class="bar" src="http://placekitten.com/100/100" />

Answer 2

You could do this.

HTML:

<div class="servicepage">
    <div class="serviceleft">
        <img class="digitalprint" src="/digitalprint.jpg">
        <img class="dyesub" src="/dyesub.jpg">
    </div>
    <div class="serviceright">
        <ul>
            <li class="digitalprint">
                 <h3>Digital Print</h3>
            </li>
            <li class="dyesub">
                 <h3>Dye Sublimation</h3>
            </li>
        </ul>
    </div>
</div>

Jquery:

$(".serviceleft > img").hover(

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "red");
},

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "black");
});