|
|
|
|
Thread title: Triggering an element's hover event via another element |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
08-06-2010, 02:54 AM
|
#1
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
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.
|
|
08-06-2010, 03:01 AM
|
#2
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
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
|
|
08-06-2010, 03:34 AM
|
#3
|
Status: Member
Join date: Mar 2005
Location: Trapped in my own little world
Expertise: Web Applications
Software: Notepad++
Posts: 385
|
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.
|
|
08-06-2010, 05:29 AM
|
#4
|
Status: Member
Join date: Jun 2010
Location: Saudi Arabia
Expertise: HTML, CSS, Wordpress, jQuery
Software: e-texteditor
Posts: 206
|
hey yeah, you can do that very simply
Code:
.forum:hover > a {
}
Be warned, IE6 wont support hovers on elements other that links.
|
|
08-06-2010, 07:31 AM
|
#5
|
Status: Member
Join date: Mar 2005
Location: Trapped in my own little world
Expertise: Web Applications
Software: Notepad++
Posts: 385
|
I actually meant use jQuery to switch the classes lol (more compatible with ie6)
|
|
08-06-2010, 12:43 PM
|
#6
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
Originally Posted by BlaineSch
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
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!
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 2 (0 members and 2 guests)
|
|
|
|