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

Question

This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 8 years ago.
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