Utilisation d'une image-objet CSS pour l'effet de survol sans l'animation de défilement

Question

J'utilise une image d'image-objet pour modifier l'arrière-plan d'un survol et cliquer (la classe .keepImage correspond au clic). Tout fonctionne, mais lorsque l'image de fond change, elle défile à la bonne position. Y a-t-il un moyen de le faire sans le mouvement de défilement?

JS:

<script> 
     $(document).ready(function(){ 
      $("a.doing").click(function() { 
       $(this).siblings(".keepImage").removeClass("keepImage"); 
       $(this).addClass("keepImage"); 
      }); 
     }); 
</script> 

CSS:

a.doing { 
      width: 229px; 
      height: 202px; 
      margin-right: 8px; 
      background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0; 
     } 
a.doing:hover, a.doing.keepImage { 
      background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0; 

     } 

Answer 1

Je pense que, quelque part dans votre css vous avez la propriété de transition spécifiée. Habituellement, lorsque vous avez spécifié une propriété de transition comme ceci: "transition: all 500ms ease;", la position de l'arrière-plan change avec un effet de défilement. Si vous souhaitez empêcher ce défilement, vous pouvez soit supprimer complètement la propriété de transition, soit utiliser uniquement la transition pour les propriétés que vous souhaitez animer comme: bordure, couleur, etc. mais pas l'arrière-plan. Si vous pouvez en quelque sorte fournir un lien vers votre page, ou donner le code HTML et css, cela vous aidera. Merci.