我可以将 jQuery 缓动与使用背景位置的现有 CSS 鼠标悬停结合使用吗？

Question

我有一系列图像鼠标悬停链接，它们在悬停时会更改背景位置。是否可以在不更改 CSS3 的情况下对这些链接使用 jquery 缓动？如果是这样，有人有任何例子吗？

这是我的代码：

  <div id="bbnav">
  <a class="bbnav1" href="#"></a>
  <a class="bbnav2" href="#"></a>
  <a class="bbnav3" href="#"></a>
  <a class="bbnav4" href="#"></a>
  <a class="bbnav5" href="#"></a>
  <a class="bbnav6" href="#"></a>
  <a class="bbnav7" href="#"></a>
  </div>

  .bbnav1:hover {background-position:     0px  -64px; cursor::pointer}
  .bbnav2:hover {background-position:  -159px  -64px; cursor::pointer}
  .bbnav3:hover {background-position:  -273px  -64px; cursor::pointer}
  .bbnav4:hover {background-position:  -422px  -64px; cursor::pointer}
  .bbnav5:hover {background-position:  -580px  -64px; cursor::pointer}
  .bbnav6:hover {background-position:  -658px  -64px; cursor::pointer}
  .bbnav7:hover {background-position:  -808px  -64px; cursor::pointer}

Answer 1

我从未见过将 JavaScript 缓动与 CSS :hover 伪类混合在一起的场景。

CSS3 规范概述了过渡。这些可能是您问题的解决方案。然而，它们尚未得到普遍支持。