CODEWITHSUNDEEP
jquerycssfirefoxgoogle-chrome
khanh
khanh

Reputation: 4606

background-image not work in chrome

  .button {
        background: transparent url("/assets/LoD-Button-Normal.png") no-repeat bottom right;
        width: 110px;
        height: 30px;
        display: block;
        background-position: bottom right; 
        text-align:center;
    }

    .button_click { 
      background: transparent url("/assets/LoD-Button-Click.png") no-repeat bottom right;
      width: 110px;
      height: 30px;
      display: block;
      background-position: bottom right;
    }

    $(".button").click(function(){
      $(this).removeClass("button").addClass("button_click");   
    })

    <a class="button" href="/link"> Button </a>

when I click button. it change background image on firefox but it not work on chrome. please help me

Upvotes: 1

Views: 1109

Answers (1)

lucuma
lucuma

Reputation: 18339

The code seems to be fine so absent of any errors it could be that chrome is redirecting before it is changing the bg image.

Try this:

$(".button").click(function(e){
  e.preventDefault();
  $(this).removeClass("button").addClass("button_click");
  location.href = $(this).attr('href'); 
  // if for some reason this isn't working you can call setTimeout with the location.href
});

Upvotes: 2

Related Questions