Question

i want to change background color on hover function but i want to show in slow motion. Also i am adding some CSS Property on hover and want to remove and hover out. But my function does not work according to my requirment.

$(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')

              })


      })

Answer 1

I don’t know about the function just yet, but your hover function has some errors. get rid of the:

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

They shouldn’t be assigned that way. Instead assign those attributes in your css for .box.

When you add the transition attributes get rid of opacity and add -duration to the end of transition so the final addition would look something like this: -moz-transition-duration: 3s

Are you wanting to change the document body background-color property, or the .box background-color property on hover? I am slightly confused.

If the change is on the body background here is a fiddle