一、鼠标指上后显示二维码，效果图如下：
鼠标未指上时：
鼠标指上后：
代码如下：
.div1 .li2 .code_wexin{
width: 0px;
height: 0px;
position: absolute;
background-image: url(../img/weixin.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.div1 .li2:hover .code_wexin{
width: 113px;
height: 113px;
margin-left: -15px;
}
原理：将该二维码另设一个div，鼠标未指上时，设置该div宽高为0，鼠标之上时，给其设置一个合适的宽高
二、鼠标指上后，按钮变色，背景图放大，效果图如下：
鼠标未指上时：
鼠标指上后：
按钮变色的代码：
.div6 .f2_content .video_card{
height:64px;
width:64px;
background:url(../img/qita.png) no-repeat ;
background-position:0 -52px;
position:absolute;
margin-top: 141px;
margin-left: 81px;
border: none;
}
.div6 .f2_content>div:hover .video_card{
background-position:-66px -52px;
}
原理：实际上没有”变“色，只是换了图片
背景图放大代码：
.div6 .f2_content .img{
width: 238px;
height: 176px;
margin-left: -2px;
overflow: hidden;
}
.f_family .div6 .f2_content > div:hover img {
transform: scale(1.1);
}
原理：让图片在一个固定大小的父容器中进行放大，用transfo标签（如果盛放图片的父容器没有固定大小，图片会溢出）
三、鼠标指上后，该块未发生变化，其他块透明度改变，效果图如下：
鼠标未指上时：
鼠标指上时：
代码如下：
.f6 .f6_content ul:hover li:not(:hover){
opacity: 0.3;
}
原理：运用not标签，当鼠标之上某个li时，反选，给其设置一个透明度。