jQuery的動畫懸停

http://www.incg.nl/blog/2008/hover-block-jquery/

和起作用的。我所做的也是讓它變大並添加背景圖片。調整CSS以將懸停動畫移動到背景圖像中的特定位置。當您將鼠標懸停在背景圖片上的任何地方時，所有這些功能都可以運行，但可以動畫。我希望它只在懸停在動畫圖像上時懸停，還是可以設置邊距？

JS：

$(function() { 
    $('ul.hover_block li').hover(function() { 
     $(this).find('img').animate({ 
      top: '374px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, function() { 
     $(this).find('img').animate({ 
      top: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }); 
    $('ul.hover_block2 li').hover(function() { 
     $(this).find('img').animate({ 
      left: '178px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, function() { 
     $(this).find('img').animate({ 
      left: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }); 
});

CSS：

body { 
    background: #666 
} 

ul.hover_block { 
    display: block; 
    overflow: hidden; 
    height: 1%; 
    padding-bottom: 15px; 
} 

ul.hover_block li, ul.hover_block2 li { 
    list-style: none; 
    float: left; 
    background: #fff; 
    padding: 10px; 
    padding-left: 315px; 
    padding-top: 78px; 
    width: 500px; 
    position: relative; 
    margin-right: 20px; 
    background-image: url('images/2.png'); 
    background-repeat: no-repeat; 
} 

ul.hover_block li a, ul.hover_block2 li a { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    height: 400px; 
    width: 500px; 
    padding: 16px; 
    color: #000; 
    font: 1.6em/1.3 Helvetica, Arial, sans-serif; 
} 

ul.hover_block li a, ul.hover_block2 li a { 
    text-decoration: none 
} 

ul.hover_block li img, ul.hover_block2 li img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
}

HTML：

<body> 
    <ul class="hover_block"> 
     <li> 
      <a href=""><img src="images/3.png" alt="" /> </a> 
     </li> 
    </ul> 
</body>

來源

2012-05-04 user1375893

您可以使用圖像映射（不由我推薦），或創建一個更小的元素來附加懸停功能。 – adeneo

我覺得你的使用選擇「ul.hover_block李」指的是懸停在列表元素，這不是圖像。如果你改變了選擇的東西，指的是IMG，而不是它應該工作的李，

看一看這樣的：jsfiddle.net/edddotcom/eYp99/

來源

2013-04-21 20:34:12 Edd

jQuery的動畫懸停

回答

相關問題