在许多站点上,比如http://www.clearleft.com,您会注意到当链接悬停在上面时,它们将淡入不同的 colored颜色 ,而不是立即切换(默认操作).

我假设JavaScript是用来创建这种效果的,有谁知道是怎么做的吗?

推荐答案

现在人们只是使用CSS3 transitions,因为它比messing with JS容易得多,浏览器支持相当不错,而且只是表面上的,所以即使它不起作用也无关紧要.

类似这样的操作可以完成工作:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

您还可以通过用逗号分隔每个声明来转换具有不同计时和轻松函数的特定CSS属性,如下所示:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Demo here

Css相关问答推荐

自定义kendo色彩 Select 器中的清晰按钮

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

我应该在哪里放置expo /Reaction本地项目的CSS重置文件?

用两步函数内插的css动画值

如果中间元素的内容不适合 CSS,如何将其分隔到新行?

努力将 CSS 样式应用于 Elm 应用程序

我无法覆盖 react ui 库中的组件样式

在 css 中使用 first-of-type 效果太好了吗?

无法更改 div 内链接的悬停 colored颜色

如何在每一行周围放置不同大小的阴影?

当我进入登录页面时,它处于桌面模式(响应式设计消失)

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度?

对齐视图中的复选框(RN)

CSS类和id同名

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

Bootstrap 3 - 在每个网格列之后打印布局和中断

css3 nth 类型限制为类

删除所有填充和边距表格 HTML 和 CSS

如何使用 Bootstrap2 使 div 居中?

go 除文本输入的内阴影