[瞎聊css] – 元老级别的伪类:hover

AD:

:hover —— 选择被鼠标悬停的元素

随着智能手机的普及,在触摸设备上由于没有鼠标..所以 :hover 就显得不那么重要,但是手机上依然是可以有效果的。

起初的css 里 :hover 是只能应用在a连接上,它诞生的是时候还是有三个兄弟的,它们四胞胎的主要作用是修饰a链接的样式,当然他们必须按顺序同时出现在能生效。

不过现在 :hover 在PC上可是强大的不得了,他被允许应用到大多数的元素上,甚至是伪类;只要是鼠标可以摸得到的地方都可以使用 :hover。最常见的就是导航菜单,例如当鼠标移动在菜单上背景、字体颜色都会发生变化。

当然我们还可以应用在父子关系的结构里面,比如

这里当鼠标移动到 .demo 时 span就会变颜色 (当然还用了绝对下的垂直水平居中,这里不做细展)

其实不管网页发生什么变化我都建议大家用下过度,哪怕只有0.2秒。加了过度之后让变化不显得那么突兀,当然时间最好不要太久

其实 :hover 本身只是起到一个鼠标悬停的效果,但是结合其他的属性会有很多意想不到事情发生,主要还是看大家的脑洞有多大。

  • 蒋凡
    发表于:2017/10/11 14:32 回复

    learn。。learn!居然不能发纯英文么。。。。。

发表评论

关注我们