Topic: jQuery | .before combined with .hover

I'm trying to add [] brackets around all my anchor tags (per my designers request). I'm able to get the brackets with .before and .after; however, when the user rolls over the anchor tag, the text changes color. I want the color of my brackets to change as the text within the anchor tag changes.

BTW I can't add the brackets within the anchor tag because I don't want the brackets to be underlined as the text is.

Any ideas how to tackle this one?

Re: jQuery | .before combined with .hover

Are the <a>s withing <li>s or something?!  If so, could use do it with css, as in #nav li:hover {color:red;}  So as well as the a:hover tiggering it, so does hover over the <li>...

Just a thought..

James Cooper --  God loving, banjo playing, geek!

Re: jQuery | .before combined with .hover

you _could_ add a span tag with a class around the brackets so in the end it would look like this:

<span class="bracket">[</span><a href="link">your link</a><span class="bracket">]</span>

then in your css just add whatever styling you want to span.bracket

your jQuery statement would look something like:

$("a").before("<span class="bracket">[</span>");
$("a").after("<span class="bracket">]</span>");

This isn't tested, but it should work...

Daniel Marino |

Re: jQuery | .before combined with .hover

Instead, you can just use .append() and .prepend() to insert the text inside the links themselves.