Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,839
There are 54 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Triggering an element's hover event via another element

Thread title: Triggering an element's hover event via another element
Reply    
    Thread tools Search this thread Display Modes  
08-06-2010, 02:54 AM
#1
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,096
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old  Triggering an element's hover event via another element

Hey all,

I'm sure there's a really simple solution to this, but I'm a bit stuck. Basically I have this HTML:

HTML Code:
<div class="forum">
<h3><a href="#">Forum Title</a></h3>
<p>Some Description</p>
</div>
I have then implemented the following JS/jQuery:

Code:
$(document).ready(function(){

    $(".forum").click(function(){
          window.location=$(this).find("a").attr("href"); return false;
    });
            
});
This works as planned: If I hover over anywhere in the containing .forum div it will find the link inside and send the browser to the href's value. However, is there a way I can trigger the <a> hover state (a:hover) causing it to change colour (defined in my css) when my cursor hover over the .forum div (not specifically the link)? It only is triggered if I hover my cursor directly over the link itself, which is the normal behaviour, of course.

Many thanks in advance.

Reply With Quote
08-06-2010, 03:01 AM
#2
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,096
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old

Just thought I could do it like this:

Code:
$(document).ready(function(){

	$(".forum").hover(
		function(){
			$(this).find("a").css("color", "fea228");
		},
		function(){
			$(this).find("a").css("color", "fe8300");
		}
	);

	$(".forum").click(function(){
	  	window.location=$(this).find("a").attr("href"); return false;
	});
			
});
Which a)is ugly, b)is repetitive and c)most importantly, doesn't work

Reply With Quote
08-06-2010, 03:34 AM
#3
BlaineSch is offline BlaineSch
BlaineSch's Avatar
Status: Member
Join date: Mar 2005
Location: Trapped in my own little world
Expertise: Web Applications
Software: Notepad++
 
Posts: 385
iTrader: 0 / 0%
 

BlaineSch is on a distinguished road

Send a message via AIM to BlaineSch Send a message via MSN to BlaineSch Send a message via Yahoo to BlaineSch Send a message via Skype™ to BlaineSch

  Old

Your code works fine for me... I tested in FF, IE6, and Chrome. Maybe clearing your cache?

I'd probably change the class though, I think defining colors in js would be complicated when switching themes etc.

You can just add to the "a:hover" to look something like "a:hover, a.hover" and add the class "hover" and then remove it etc.

Reply With Quote
08-06-2010, 05:29 AM
#4
Fez is offline Fez
Fez's Avatar
Status: Member
Join date: Jun 2010
Location: Saudi Arabia
Expertise: HTML, CSS, Wordpress, jQuery
Software: e-texteditor
 
Posts: 206
iTrader: 2 / 100%
 

Fez is on a distinguished road

Send a message via MSN to Fez

  Old

hey yeah, you can do that very simply

Code:
.forum:hover > a {

}
Be warned, IE6 wont support hovers on elements other that links.

Reply With Quote
08-06-2010, 07:31 AM
#5
BlaineSch is offline BlaineSch
BlaineSch's Avatar
Status: Member
Join date: Mar 2005
Location: Trapped in my own little world
Expertise: Web Applications
Software: Notepad++
 
Posts: 385
iTrader: 0 / 0%
 

BlaineSch is on a distinguished road

Send a message via AIM to BlaineSch Send a message via MSN to BlaineSch Send a message via Yahoo to BlaineSch Send a message via Skype™ to BlaineSch

  Old

I actually meant use jQuery to switch the classes lol (more compatible with ie6)

Reply With Quote
08-06-2010, 12:43 PM
#6
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,096
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old

Originally Posted by BlaineSch View Post
Your code works fine for me... I tested in FF, IE6, and Chrome. Maybe clearing your cache?

I'd probably change the class though, I think defining colors in js would be complicated when switching themes etc.

You can just add to the "a:hover" to look something like "a:hover, a.hover" and add the class "hover" and then remove it etc.
Oh does it? I'll have another check (it was 4am after all!). I agree, adding a class would be better. Thank you

Ahh, I see what I did wrong. I didn't put # before the colour hex code!

Originally Posted by Fez View Post
hey yeah, you can do that very simply

Code:
.forum:hover > a {

}
Be warned, IE6 wont support hovers on elements other that links.
I thought of that way, but tend to stick away from it, because of the whole "unsupportedness" of it, but thanks anyway!

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed