css中 鼠标离开 怎么写

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,鼠标离开触发的事件为mouseout,用于指定鼠标移出指定元素的操作。当鼠标从元素上移开时,可以使用mouseout属性指定一系列的样式效果,比如改变元素的颜色、大小以及透明度等等。在HT

在CSS中,鼠标离开触发的事件为mouseout,用于指定鼠标移出指定元素的操作。当鼠标从元素上移开时,可以使用mouseout属性指定一系列的样式效果,比如改变元素的颜色、大小以及透明度等等。

在HTML中,我们可以通过onmouseout属性来捕获鼠标移出事件,如下所示:

<div onmouseout="this.style.color='red'">
  鼠标移出我就变成红色啦!
</div> 

在CSS中,我们可以使用:hover伪类来指定当鼠标移到元素上时所要应用的样式,同样可以使用:hover来指定当鼠标离开元素时所要应用的样式:

<style>
  /* 鼠标移出时元素变成红色 */
  div:hover {
    color: red;
  }
  
  /* 鼠标离开时元素恢复原样 */
  div {
    color: black;
  }
</style>

<div>
  鼠标移上来我就变成红色啦!
</div> 

通过上面的代码,我们可以实现当鼠标移到

元素上时,文字变成红色,当鼠标离开时,文字恢复原样。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中 鼠标离开 怎么写

粉丝

0

关注

0

收藏

0

已有0次打赏