Question

我想改变悬停在另一张图片时显示的图像的位置。我怎样才能做到这一点... 这是我的代码 http://jsfiddle.net/bulina/aGX5J/1/

<div id="img1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah" onmouseover="this.src='http://motherhoodtalkradio.files.wordpress.com/2010/03/pink-daisy-motherhood-incorporated2.jpg'" onmouseout="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah'"/>
</div>

和css：

#img1{
position:absolute;
left:20%;
bottom:50%;    
     }

Answer 1

不确定，可能对您有所帮助。如果你没有为转换设置动画 - 并且考虑到我将这些图像分组为精灵，我不知道为什么你会这样做 - 那么你需要这样的东西：

$(document).ready(function(){
  $('#home a')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $(this).css('backgroundPosition', '0 -54px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $(this).css('backgroundPosition', '0 0');
   })
 });

现在，如果您正在尝试设置动画，那么您的CSS语法和“动画”调用都会有错误的语法。

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

同样，我怀疑jQuery是否能够为你制作“backgroundPosition”动画，但是我不经常做“animate（）”而且jQuery总是让我感到惊讶。

这是一个页面：http://snook.ca/archives/javascript/jquery-bg-image-animations/

Answer 2

我认为这对普通的CSS来说是不可能的。如果您有兴趣，可以考虑使用javascript或像YAML这样的CSS框架查看此页面http://www.yaml.de/

在另一个图像的悬停时更改图像的位置

2 个答案: