CSS: Hover over one element, effect another?

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>

This cannot be done with CSS. You must use jQuery/JavaScript if you want to keep current HTML markup. — Miljan Puzović, Apr 08 '13 at 00:51
Really? :( Ok... i dont have a clue how I would do this with jQuery or JavaScript. — Gareth Pullen, Apr 08 '13 at 01:01

score 6 · Accepted Answer · answered Apr 08 '13 at 01:23

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" />

This is great. Can we do the same between parent and child? (i.e. Hover on child to change parents border.) — Bee, Mar 15 '14 at 12:30

score 1 · Answer 2 · answered Apr 08 '13 at 01:31

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

score 1 · Answer 3 · answered Apr 08 '13 at 02:07

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

Thank you. I managed to do it using @btevfik 's code, but it meant 4 lines for each service = 36 lines of code. I shall try and replace with yours when i get time!! — Gareth Pullen, Apr 08 '13 at 03:50
Ok, try btefvik's code. Just to make clear, this code is complete, you don't have to change it. — Miljan Puzović, Apr 08 '13 at 11:19

CSS: Hover over one element, effect another?

3 Answers3