html5 - CSS3 Hover not working for a Button image to change -


i clueless here. have hover functions working fine on nav menu ul li trying hover single button, , after staring @ code on 15 minutes, not clue...

this html:

<div>       <a id="backbutton" href="services.html" title="go services">go back</a>       <br /> </div> 

this css3:

#backbutton { display: block; width: 200px; height: 54px; background: url('../images/backbutton.png') center center no-repeat; text-indent: -9999px;     } 

this 1 above working totally fine. text gone , button displays properly. it's below code not working

#backbutton a:hover { background: url('../images/backbuttonhover.png') center center no-repeat; width: 200px; height: 54px; } 

the image not replace targeted hover image (yes, uploaded on server.)

any clues?

#backbutton a:hover 

to

#backbutton:hover 

#backbutton {  display: block;  width: 200px;  height: 54px;  background: url('http://wiki.openstreetmap.org/w/images/1/1c/openclosed.png') center center no-repeat;     }  #backbutton:hover {  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:and9gctic0kojupsnsp7qfgktszyccyzztalf58mrnztinw19zw5wv8h1g') center center no-repeat;  width: 200px;  height: 54px;  }
<a id="backbutton" href="#" title="go services">go back</a>


Comments

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -