Question

我想为按钮的鼠标中心导航添加JQuery淡入淡出效果。我已经在我的CSS中创建了一个鼠标悬停样式，但没有为没有激活javascript的浏览器淡出。

我的结构：Jsfiddle

#menu li:hover {
 background-image: url(http://file2.npage.de/012690/81/bilder/menu_sub_hover.png);
 }

在此代码中是pic，在鼠标悬停时打开。

Answer 1

更新

如果你想使用Jquery，你应该使用.fadeTo（持续时间，不透明度）

这是一个快速代码示例

$('.fade')
  .on('mouseenter', function(){$(this).fadeTo(400,.5);})
  .on('mouseleave', function(){$(this).fadeTo(400,1);});

菲德尔：http://jsfiddle.net/eoze559h/7/

<小时/> 如果你想做一个淡入淡出，为什么不用CSS做呢？

Fiddel：http://jsfiddle.net/eoze559h/5/
这是CSS代码示例：

.fade {

    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
      opacity: 0.5;
}

Answer 2

我试试，但我不确定这个解决方案，也许只使用css

需要jquery库！

FIDDLE

$("#navi li a").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

JQuery淡入淡出鼠标中背景图像的效果

2 个答案: