在悬停时淡入/淡出背景图像

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
  });
});