css transition hover

最新推荐文章于 2024-11-29 10:15:52 发布

原创最新推荐文章于 2024-11-29 10:15:52 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用CSS的transition属性实现宽度从100px到300px的平滑过渡效果，配合:hover伪类，当鼠标悬停在div上时宽度变化过程控制在2秒内。

transition：意为过渡

  div{
  width:100px;
  transition: width 2s;
  -webkit-transition: width 2s; /* Safari */}
  div:hover {width:300px;}
``
此时 把鼠标放到div上，宽度会不断增大，2s后从100px达到300px

```js
$("#id").hover(function(){
  //鼠标悬停时触发 mouseenter 事件。
},function(){
  //鼠标从悬停移开时，触发mouseleave 事件
});