0

我想更改悬停功能的背景颜色，但我想以慢动作显示。我还在悬停时添加了一些 CSS 属性，并希望删除并悬停。但我的功能不符合我的要求。

$(function (){

      $('.box').hover(function (){

          $('body').css({'background-color':'black'})

          $(this).css('-moz-transition', 'opacity .3s')
          $(this).css('-webkit-transition', 'opacity .3s')
          $(this).css('-o-transition', 'opacity .3s')
          $(this).css('-ms-transition', 'opacity .3s')

          }, function () {

              $('body').css({'background-color':'black'})

              $(this).remove('-moz-transition','none')

              })


      })
4

2 回答 2

1

我还不知道这个功能，但你的悬停功能有一些错误。摆脱：

  $(this).css('-moz-transition', 'opacity .3s')
  $(this).css('-webkit-transition', 'opacity .3s')
  $(this).css('-o-transition', 'opacity .3s')
  $(this).css('-ms-transition', 'opacity .3s')

他们不应该被这样分配。而是在您的 css 中为.box.

当您添加过渡属性时，摆脱不透明度并添加-duration到末尾，transition因此最终添加看起来像这样：-moz-transition-duration: 3s

您要更改文档body background-color属性还是.box background-color悬停时的属性？我有点困惑。

如果更改是在身体背景上，这里是一个小提琴

于 2012-07-12T10:27:49.700 回答
0

可以使用 Jquery UI 完成颜色转换。这是演示。

于 2012-07-12T09:57:32.053 回答