Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Replace image in active state exactly to cover static image Jquery Mobile

Replace image in active state exactly to cover static image Jquery Mobile

Problem

I'm trying to replace an image on active state to what is basically a button in Jquery Mobile, however, I have data-role="none" set in the tag. The reason for this is that I don't want the styles applied to these "buttons" that jQuery Mobile normally applies.

I've got it sort of working, however, I can't get the image (the red one) to switch out exactly over the black one even though I have them set to the exact same size and placement in CSS.

What are the best practices for trying to accomplish this in jQuery Mobile?

HTML:

CSS:

   body .ui-content .maine a:active {

      background: url(images/icons/[email protected]) !important;
      background-repeat: no-repeat !important;
      text-align:left;
      margin-top:20px;
      margin-left:890px;
      width:98px;
      height:85px;
      z-index: 1000 !important;
   }

Here's the fiddle:

http://jsfiddle.net/codewarrior_777/NppNA/13/

Problem courtesy of: Paul

Solution

Well using pure CSS, I can think of this

CSS

.maine a img {
     background-repeat: no-repeat !important;
     text-align:center !important;
     background-size: 98px 85px;
     width:98px !important;
     height:85px !important;
     z-index: 10 !important;
 }

.maine a:active img {
     background-image: url(http://syntheticmedia.net/[email protected]) !important;
     background-repeat: no-repeat !important;
     text-align:center !important;
     width:98px !important;
     height:85px !important;
     z-index: 10000 !important;
 }

Edit -

  1. Fiddle using img tag (there is a sort of border around image)
  2. Fiddle without using img tag
Solution courtesy of: Siddhartha Gupta

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Replace image in active state exactly to cover static image Jquery Mobile

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×