jQuery - on hover change another element

In a content box I have an title and below that an image.

Currently when the title link is hovered over the background color changes, and when the image link is hovered over a jQuery fade is activated.

Test site here: http://fastraxcc.titmanfirth.com/

What I would like is that when the text link is hovered over the image fade is also triggered. And also the other way around, when the image link is hovered over I want the the text link back ground to change.

Any help much appreciated.
<div class="col_3">
     <h2><a title="myTitle" href="page.html">Link</a></h2>
     <div><a class="fade" title="myTitle" href="page.html"><img title="myTitle" src="image.jpg" alt="myAlt" /></a></div>
</div>

Open in new window

Luv2MuffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Is this the stuff you are looking for?



<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<div class="col_3">
     <h2><a id="myLink" title="myTitle" href="page.html">Link</a></h2>
     <div><a class="fade" title="myTitle" href="page.html"><img id="myImage" title="myTitle" src="image.jpg" alt="myAlt" /></a></div>
</div>

<script>
	$("#myLink, #myImage").hover(function(){
		$("#myLink").css("background-color", "blue");
		$("#myImage").fadeTo('slow', .50);
	}, function(){
		$("#myLink").css("background-color", "red");
		$("#myImage").fadeTo('slow', 1);
	});
</script>

Open in new window

0
Luv2MuffAuthor Commented:
Sorry, not really. I probably need to explain more.

I cannot use id's of each element in the CMS that I am using. So need a solution that does some thing like:

- If image is hovered over, change background of preceding text link

- If text link is hovered over activate the function (attached) for the following image link

Does that make sense, is it possible?
// Fade image links on mouseover
$jQ(document).ready(function() {
// make sure the image is at full opacity on load
$jQ(".fade").css("opacity", "1.0");

	// Change speed/opactity of mouseover state
	$jQ('.fade').mouseover(function() {
		$jQ(this).stop().fadeTo(400, 0.3);
	});

	// Change speed/opactity of mouseout state
	$jQ('.fade').mouseout(function() {
		$jQ(this).stop().fadeTo(500, 1.0);
	});
});

Open in new window

0
StealthyDevCommented:
Yes, anything is possible.. But we need to find out the way.

After analysing your page, i found that, you are having:
div-h2-a
div-div-a-img

if this is the case with all the image-preceding text, i can give you the way.

is that true?
0
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Luv2MuffAuthor Commented:
I think so. Each content block uses:

div-h2-a
div-div-a-img

But each block does not have a unique id or class
0
StealthyDevCommented:
If the above combination will not affect other images or other links of your page, you can use the below code:

image hover - fade the image and change the background color of the text
text hover - do the same

if you want to alter the function, you can ping me.

Regards.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<div class="col_3">
     <h2><a title="myTitle" href="page.html">Link</a></h2>
     <div><a class="fade" title="myTitle" href="page.html"><img title="myTitle" src="image.jpg" alt="myAlt" /></a></div>
</div>

<script>
	$("div div a img").hover(function(){
		$(this).parent().parent().parent().children("h2").children("a").css("background-color", "yellow");
		$(this).fadeTo('fast', .50);
	}, function(){
		$(this).parent().parent().parent().children("h2").children("a").css("background-color", "red");
		$(this).fadeTo('fast', 1);
	});

	$("div h2 a").hover(function(){
		$(this).css("background-color", "yellow");
		$(this).parent().parent().children("div").children("a").children("img").fadeTo('fast', .50);
	}, function(){
		$(this).css("background-color", "red");
		$(this).parent().parent().children("div").children("a").children("img").fadeTo('fast', 1);
	});
</script>

Open in new window

0
StealthyDevCommented:
To make sure it will not affect other part of your page, please try to give a common class name or some identification, like title or whatever.

Regards.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Luv2MuffAuthor Commented:
WOW!!

Fantastic!! You are a star!!

Works a treat, many thanks!!
0
Luv2MuffAuthor Commented:
Perfect!!
0
StealthyDevCommented:
You are always welcomed.

Glad to know that my attempt helped you!

Best Regards.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.