Create New Div Arround Anchor Link When Clicked

How can I achieve this behaviors onclick with jquery : default state: Anchor click state

).click(function(a) { $(a).wrap($('<div/>').addClass('highlight')); });

That seems like kind-of a funny idea however. Why not just add the class directly to the <a> element itself?

Oh sorry - your question says "clicked" but the explanation says "hover". That's going to be a little trickier, because you're going to want to get rid of that extra div when you mouse out. Again, if this were my page, I just wouldn't do that at all. What is it that you're trying to achieve?

edit again: ok now it says "click" again :-)

Solution 2:

Fastest way to do this:

$('a').click(function() {
  $(this).wrap($('<div/>', { 'class': 'highlight'}));
});

However, this is probably what you want, much simpler just use whatever CSS effect you want:

$('a').click(function() {
  $(this).addClass('highlight'});
});

Solution 3:

Checkout jQuery's wrap function.

$(this).wrap('<div class="highlight"></div>');

Solution 4:

Why don't you just style a:hover?

Something like this in CSS:

.highlight a {
    /* style */
}

.highlight a:hover {
    /* hover style */
}

Then change your HTML to:

<a href="something.html" class='highlight'>Anchor</a>

Share