CSS :hover 选择器
2019-01-26 本文已影响57人
Devops海洋的渔夫
仅供学习,转载请注明出处

hover的用处
:hover
选择器是用来给鼠标指针在其上浮动的链接设置样式。
下来使用hover来解决一个简答的需求。
当鼠标在超链接上,超链接背景颜色变为gold颜色

鼠标移动上去,则如下:

可以看到,当鼠标移动上去之后,背景的颜色就改变了。
那么:hover
的这个特性只能给 a 标签使用吗?下面用span和div来测试一下看看。
使用span来测试能否使用 :hover
功能

使用div来测试能否使用:hover
功能

好了,既然div可以,那么下面可以使用display来实现一个小功能。
div使用:hover
功能实现内嵌一个div隐藏、呈现功能

使用display: none
就可以实现鼠标移动到绿色div就隐藏的效果的了。

关注微信公众号,回复【资料】、Python、PHP、JAVA、web,则可获得Python、PHP、JAVA、前端等视频资料。