设计思路
：
-
在btn按钮的前后都加上伪元素before和after元素（宽度为0，不显示出来）
-
为鼠标添加hover，当鼠标悬停上去的时候给伪元素都设置宽度为100%
-
为其中之一的伪元素增加过渡效果transition，并且设置背景颜色
-
另一个伪元素不用设置过渡，得到立马变化的效果
keys:
before和after一直在最下方
如果没有after的话会导致，btn的背景为透明会出现看着before从左到右变化
解决方法就是增加after元素，并且设置背景色与原先btn背景色一致
<!DOCTYPE html>
<html lang="en">
<style>
.btn{
position: relative;
width: auto;
min-width: 120px;
padding: 10px;
text-align: center;
color: #fff;
background: #00d463;
cursor: pointer;
border-radius: 4px;
border: none;
.btn:after,.btn:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #00d463;
z-index:-2;
border-radius: 4px;
.btn:hover{
z-index:1;
background:transparent;
.btn:before {
transition: .3s;
background: #14ae5c;
z-index:-1;
.btn:hover:after,.btn:hover:before {
width: 100%;
</style>
</head>
<button class="btn">Try Free</button>
</body>
</html>
参考于 https://blog.csdn.net/ann295258232/article/details/90059607
一、DIVCSS5介绍与说明： - TOP
看到网页中的图片当鼠标移动到图片上时（鼠标悬停在图片上）图片变灰，看似变色变灰效果，实际是图片被CSS设置为半透明样式。
二、关键CSS代码： - TO
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-...
没有html / css没有内置的选项,但是因为你在javascript中访问/设置颜色,你可以添加你自己的功能,它可以为你处理.这是给你的一个例子：function RGBA(red,green,blue,alpha) {this.red = red;this.green = green;this.blue = blue;this.alpha = alpha;this.getCSS = func...
通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大，且在按钮的下面，刚开始宽度为0
2.鼠标移动过去:
button的真正的背景色设置为透明，然后给最下面一层的颜色是以前的背景色，z-index:-2，width:100%
按钮下面一层，z-index:1,背景色为新背景色，width:100%,再设置个过...
js设置鼠标悬停以更改背景颜色的详细说明更新时间：2019年6月26日10:20:42转载作者：Code fly`本文主要介绍js设置鼠标悬停以更改背景颜色的详细实现。本文通过示例代码进行了详细介绍，该示例代码对每个人的学习或工作都有一定的参考学习价值，需要的朋友可以参考我在Internet上看到了很多js鼠标悬停事件，其中大多数在说了这么多之后并没有解决问题，现在直接粘贴代码以供参考html：t...
是行内元素，直接设置宽和高是没有反应的，使用相对定位absolute或者给伪类元素加display:block/inline-block 才能设置宽高
要注意content中如果设置图片后，无法控制其大小
将图片用作背景效果，通过background-size控制其大小，而且要注意先写background：url()再写background-size否则效果无法实现
section ul a:nth-child(2
还有一个就是Css的新属性：Scroll Snap
background: url(../../../Img/img01.jpg);
background-size: cover;
background-attachment: fixed;
使图片固定-fixed，
首先，我们先来想一下，为什么要引入伪类跟伪元素？
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。
什么是伪类，伪元素？
伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:h
我们经常看到的网站基本上都有导航菜单，有的网站看上去非常酷，鼠标一移动到上面自动改变颜色，这样的导航有两种方法可以实现：一种是鼠标经过图像，一种是CSS定义。鼠标经过图像是把菜单做成两张文字相同但颜色或图案不一样的图片，当鼠标滑过时就自动切换图片，这样的导航菜单优点是色彩丰富，可以做得相当炫酷，缺点是图片中没有实质文字，不利于搜索优化，在一些CMS系统中使用起来也不是很方便。CSS定义鼠标滑过导航...
