CODEWITHSUNDEEP
htmlcss
Adib Aroui
Adib Aroui

Reputation: 5065

change background position onclick

I have an anchor <a>, which I am using as a button. I am using a sprite to make the button change its shape depending on mouse events. From normal to hover, It is working. I change the opacity as indicated in code below. The problem is when the button is clicked (from hover to click). I want the background position to slide from 46% to 51% to show another part of the sprite. I tried before, after, focus...but in vain. Your help is appreeciated.

.left_arrow_trigger
{
    height:100%; 
    width:100%;
    display: block;
    background: url('../images/dashboard_sprite.png') no-repeat;
    background-position:0 46%; 
    background-size: 1500% 1700%;
    opacity:.41;

}

.left_arrow_trigger:hover
{
    opacity:.90;
}

.left_arrow_trigger:focus 
{
background-position:0 51%; 

}

Upvotes: 0

Views: 953

Answers (1)

2pha
2pha

Reputation: 10165

try this: 

.left_arrow_trigger:active 
{
  background-position:0 51%; 
}

Upvotes: 2

Related Questions