Question

嗨，我的菜单颜色为#006699，悬停时我希望逐渐转到颜色#4796E9。这可能吗？

Answer 1

是的，您可以使用jQuery执行此操作。 CSS Tricks有一个名为颜色渐变菜单的教程，带有jQuery here。

Answer 2

您也可以使用CSS3实现它（它可以在除IE9及更低版本之外的所有浏览器上使用）。这是一个例子：

-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;

Answer 3

这听起来像是你可以用jQuery做的事情。

本

Answer 4

你不需要JavaScrip !!!

使用CSS3 transitions

可以轻松完成此操作

<style>
nav {
  transition: background-color 0.5s ease;
  background-color: #006699;
  color: white;
}

nav:hover {
  background-color: #4796E9;
}
</style>


<nav>
  <h1>This menu changes color GRADUALLY on mouse-hover</h1>
</nav>

看看我的工作代码：http://codepen.io/omarjuvera/pen/vGMezz

Answer 5

我认为CSS不可能。但你可以通过javascript来做到这一点。在jquery中尝试fadeIn效果。

Answer 6

Here's有人用JQuery执行此操作的插件。

Answer 7

使用JavaScript（您可以使用jQuery animate（）方法或WebKit CSS动画轻松完成：http://webkit.org/blog/138/css-animation/（请注意，此方法仅适用于WebKit）。

我推荐JavaScript路由 - 使用jQuery或scriptaculous等框架。有关jQuery动画方法的信息：http://docs.jquery.com/Effects/animate

如何制作：悬停逐渐有其他颜色

7 个答案:

你不需要JavaScrip !!!