css  hover 鼠标悬停属性，是当鼠标放到某个元素上面时，重新书写我们的样式。这样的特性可以让我们做一些动态的效果出来，比如：

  • 鼠标放到button上，更改button的背景色和文字显示；
  • 鼠标放到图片上，更改图片的透明度或者切换图片；
  • 鼠标放到某个元素，做出反转的效果；

css  hover 基本上在所有浏览器上兼容，但是在触摸屏上实现却有些困难。

语法

:hover {
 /*重写的样式*/
}

例子

1） 修改背景色

<html>
<head>
	<title>css  hover 鼠标悬停</title>
<style>
  
p:hover, h1:hover, a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<p>yxjc123.com 悬停修改为黄色</p>
<a href='https://www.yxjc123.com'>CSS 属性</a>
</body>
</html>

css hover 鼠标悬停

更多动态效果可以参考：css transition 过渡效果。