CSS之BEFORE与HOVER之间的误区

CSS之BEFORE与HOVER之间的误区
在新手练习写网页格式时，会有想法把网页写的更加灵动，充满小设计，所以一些细节之处的效果就显得尤为重要。

hover
在鼠标移到链接上时添加的特殊样式。

此时我们可以为我们想要的元素，在鼠标移动上去之后，显示一些效果，比如：

此时的链接是绿色，添加了a:link {color:green;}的效果

此当鼠标放上去时，链接变成了红色，添加了a:hover {color:red;}的效果

hover效果，对于鼠标划过的有反应，并且可以明显的看到变化。

before
作为一种伪元素，用途很多，其中容易与hover搞混的是它的渐变效果，或者可以说是特效，比hover的效果要更加的有感官体验。

当鼠标移动到元素区域时（不限定元素种类，链接，标题，文本，边框，都可以），会直观的看出，在一定时间内的渐变效果。

这张图片的边框是浅灰色，标题下的边框也是浅灰色

此时可以看出来，边框已经是黑色的了，然而标题下的边框，正在从头开始逐渐的变为黑色

此时标题底部的标签已经完全变成黑色

这种效果，在鼠标移至盒子时就开始产生，在移出盒子外时，又开始褪去，这种动态的效果，用的就是::before来实现的

整体的思路如下：

我们首先设置好 news_head 的 ::before 样式，如何变化（transition: all.6sease0s 变化时间控制为0.6s），变成什么颜色（background-color: #555555 颜色变为此种颜色，之前的颜色在设置 news_head 的属性时就已经体验设置好），从哪里开始变化（width: 0 从长度为零，也就是从左到右的起点位置），开始慢慢变化。

.news_head::before {
position: absolute;
content: ‘’;
width: 0;
height: 1px;
background-color: #555555;
left: 0px;
bottom: -1px;
margin: 0;
transition: all.6sease0s;
}
设置好这些之后（别忘了 content: ‘’ 无论如何都要有这一句，这句话包含的是改变的内容，为空都是可以的），开始考虑外部盒子，也就是 news_box 设置 hover 的情况下，当鼠标移动到 news_box 时，hover 的属性被触发，再接着， news_head::before 的属性触发，设置的 width: 100%; 是从之前的 width: 0 开始，经过0.6s的变化逐渐完成。此时整个鼠标移动过去的效果就完全完成了，当鼠标移走时，hover的属性不再被触发，这种特效也就不会显现。
.news_box:hover .news_head::before{
width: 100%;
}
初学者要注意的一点是，理解清楚hover只是一种效果，而before可以达到更加高级的动态特效。
如无特殊说明，文章均为本站原创，转载请注明出处