Background image disappear and appeared on mouse hover

Discussion in 'HTML & Website Design' started by web-developer, Jan 3, 2011.

0
  1. #1
    I have used image in css class and I want to change that image on mouse hover image.
    Below is my code

    
<a href="#" class="image-url">Price</a>

<style type="text/css">
a.image-url{
background:url("../images/price-button.jpg") no-repeat scroll 0 0 transparent;
}

a:hover.image-url{
background:url("../images/price-button-hover.jpg") no-repeat scroll 0 0 transparent;
}
</style>
    PHP:
    It’s working fine.

    But when I move my mouse over the href blinks. So it disappears and appears image.
    This is only fist time after page refresh or load.

    Please help me to solve this problem.
    Thanks
     
    web-developer, Jan 3, 2011 IP
  2. womo1984

    womo1984 Guest

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    68
    #2
    This is normal behaviour, it takes some time for the browser to actually LOAD the image.

    If you don't want the blink to happen, preload the image before the user can hover over you links. E.g. create a small DIV (e.g. 1×1 px) that has the hover image as background.
    P.S.: I know, stupid idea, but could think of anything better now.
     
    womo1984, Jan 3, 2011 IP
  3. hell0world

    hell0world Active Member

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #3 
    
<a href="#" class="image-url">Price</a>

<style type="text/css">
a.image-url{
background:url("../images/price-button.jpg") no-repeat scroll 0 0 transparent;
}
[B]
a.image-url:hover[/B] {
background:url("../images/price-button-hover.jpg") no-repeat scroll 0 0 transparent;
}
</style>
    Code (markup):
     
    hell0world, Jan 3, 2011 IP