CODEWITHSUNDEEP
jqueryhtmlcss
Kris
Kris

Reputation: 3769

Outline on click?

I have the following code:

<a href="main.html" class="admin"><div class="buttonlabel">Admin</div></a>

and CSS

a.admin  
{
display:block;
text-decoration:none;
float:left;
background: transparent url(./images/adminnormal.png?rand=628) no-repeat top center;
height:75px;
width:75px;
margin:5px;
outline: #00FF00 dotted thick;
}

The code above has this output:

enter image description here

I want this link to be outlined only when a user clicks it (onclick). Any ideas how to do that?

Upvotes: 0

Views: 2000

Answers (3)

Gareth
Gareth

Reputation: 138012

Use the :active pseudo-class:

a.admin:active {
  outline: #00FF00 dotted thick;
}

No need for any javascript at all.

EDIT: It is pointed out that :active is defined to only work while the mouse is held down. The :focus pseudo-class can be used - it will be active when the link is focused, which it will be after being clicked until something else is selected.

Upvotes: 0

Arthur Halma
Arthur Halma

Reputation: 4001

HTML:

<a href="main.html" class="admin"><div class="buttonlabel">Admin</div></a>

CSS:

a.admin  
{
display:block;
text-decoration:none;
float:left;
background: transparent url(./images/adminnormal.png?rand=628) no-repeat top center;
height:75px;
width:75px;
margin:5px;

}
a.admin.act{outline: #00FF00 dotted thick;}

jQuery:

$('.admin').click(function(){
$(this).addClass('act');
})

Upvotes: 4

Alex
Alex

Reputation: 9031

Simple buddy:

$('a.admin').click(function(){
  $(this).attr('style','outline: #00FF00 dotted thick;');
});

Upvotes: 1

Related Questions