悬停淡入/淡出背景图片

Question

而不是从左到右，从右到左的过渡。 如何使它淡入淡出，没有动作，只是不透明度淡出，淡入。

http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

Answer 1

您可以使用CSS3属性的不透明度和过渡来完成此操作

.yourClass
{
    opacity: 1;
    transition: all 3s ease;
} 

.yourClass:hover 
{
    opacity: 0;
}

这里的一个例子：

http://jsfiddle.net/ghBAT/

Answer 2

如果您对jquery没问题-看看.fadeIn()

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
  });
});