jquery hover
- Started
- Last post
- 12 Responses
- moural
Hey guys, this is probably a very stupid question, but I am a bit of a novice...
How can I add a hover/mouseover event that returns to the previous state on mouseout?
Thanks!
- ETM0
onmouseout
- ahalvarsson0
$('#id').hover(function() {
//Mouse Over
}, function() {
//Mouse Out
});
- moural0
Right, I understand that. Let me try to be a little clearer...
Let's say I have two text links which are blue and two which are red. When I mouse over them I want them to turn yellow, but after I mouse out, I want them to return to their original color (red or blue). Does that make any sense?
If I use the code above, I would have to specify the color for mouse out.
- amullins0
use a hover class...
$('#id').hover(
function() { $(this).addClass('hoverClass'); },
function() { $(this).removeClass('hoverClass... }
);
- moural0
That still won't work unfortunately. Here's exactly what I have:
When I click on a link it stays unchanged, but all of the other links receive a strike (text-decoration: line-through). That works fine. However, I want them to lose the line and just have an underline during the hover state, but if I use a class, I still can't return to the original state... I have to define it. Basically, they'll all change to either line-through or none after hover. I just want them to change to what they were before...
- bigtrickagain0
i'm not sure what the problem is? amullins' script should work - you're just adding and then removing the hoverClass, you're not changing any other class. like if you had
<a class="red" /> <a class="red" /> <a class="blue" /> <a class="blue" />
and you used jquery's hover class in the way amullins specified, if you mouseovered the third link you'd have
<a class="red" /> <a class="red" /> <a class="blue hoverClass" /> <a class="blue" />
and when you mouseouted again you'd have:
<a class="red" /> <a class="red" /> <a class="blue" /> <a class="blue" />
that seems to be what you're asking for right there - if not, clarify plz (:
- pillhead0
a
a:hover
a:visited
- welded0
Ya, no need for Javascript on this unless you are trying to change the hover state of multiple links at once.
- moural0
I have to use javascript because of the way the links are configured.
When I click one link, the other links on the page get a strike through them and the active link remains unchanged. When I hover over any of the links, I want them to be underlined only (no strike). When I mouseout I want them all to reset to how they were - strike or no strike.
When I use a class, it won't work because it just adds the class to the existing one. So, if I have a class with 'text-decoration: line-through' and add another class with 'text-decoration: underline', it uses both. I have to first remove one...
The problem is all of the links are not the same, so I can't do that.
- you can remove classes too, or put !important in the CSS attributes if you append classesernexbcn
- bigtrickagain0
can't you use classes, though?
do this in your css:
a {
//whatever style
}
a.inactivePage {
text-decoration: line-through;
}
a.activePage {
text-decoration: none;
}a.inactivePage:hover, a.activePage:hover {
text-decoration: underline;
}no jquery needed. and, it won't do underline and strikethrough at the same time - text-decoration can only have one value at a time, so no worries there.
- moural0
^^^
I think that would not work because they're all on one page. I would still need to use javascript.Anyway, it seems like I've gotten it to work. I put some span tags, am changing the classes on those, and now it's okay. For some reason it kept messing up when I would change classes directly for the links. Whatever. I still have to figure out exactly what's going on... :)
Nonetheless, thanks for the help everyone! Even if it didn't work out (mostly because I can't explain it properly I'm sure) I still appreciate it greatly!