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?
 
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
 
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.