怎样才能在鼠标悬停时使字体变大呢?随着时间的推移, colored颜色 过渡效果很好,但由于某些原因,字体大小会立即切换.

示例代码:

body p {
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;
}

 p:hover {
      font-size: 40px;
      color:#FC0;
 }

推荐答案

随着时间的推移, colored颜色 可以很好地过渡,但字体会切换 立即出于某种达格纳比特的原因.

您的font-size转场正在被您的color转场覆盖.

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

相反,您必须将它们合并为一个声明:

transition: color 12s, font-size 12s;

See: http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

(或者,只使用all关键字:transition: all 12s;-http://jsfiddle.net/thirtydot/6HCRs/1/).

Css相关问答推荐

Safari CSS扫描动画效果不起作用

如何防止css边框缩小div?

如何剪切一个正方形以便我可以绘制追逐边框?

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

:is() 伪类是否支持相邻sibling 表达式中第二个元素的组合器?

我怎样才能让我所有的网格列的高度等于最短列的高度

如何为 React Native switch 组件创建标签?

来自 A 队和 B 队的类污染了同一个全局命名空间

在revealjs/Quarto中定义一类反背景的幻灯片

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

如何在 nth-child 中正确传递 CSS 变量?

在 RC.1 中,某些样式无法使用绑定语法添加

CSS3 变换:旋转;在 IE9 中

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

矩形图像的 CSS 圆形裁剪

CSS 悬停与 JavaScript 鼠标悬停

让 div 扩展全高

多个和/或嵌套的 bootstrap 容器?

CSS 边距和填充速记属性顺序的助记符

为什么媒体查询的顺序在 CSS 中很重要?