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");
});

Answer 3

I've tried to reproduce code for your markup on the site, and this jQuery code should work, just copy/paste it on your site.

<script type="text/javascript">
    $(document).ready(function(){
        $(".serviceright h3").mouseenter(function(){
            var indexH3 = $(this).parent().index();
            $(".serviceleft .spotlight").eq(indexH3).addClass("border");
        });
        $(".serviceright h3").mouseleave(function(){
            $(".serviceleft .spotlight").removeClass("border");
        });

        $(".serviceleft .spotlight").mouseenter(function(){
            var indexA = $(this).index();
            $(".serviceright h3").eq(indexA).addClass("redtext");
        });
        $(".serviceleft .spotlight").mouseleave(function(){
            $(".serviceright h3").removeClass("redtext");
        });
    });
</script>

You must add some CSS classes for hover effect, for example

.border {
    border: 1px solid red;
}

.redtext {
    color: red;
}

Set properties for hover effect, and if you need to rename those classes, change those names in jQuery code also.

And here is DEMO