一、鼠标指上后显示二维码，效果图如下：

鼠标未指上时：　　鼠标指上后：

代码如下：

.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时，反选，给其设置一个透明度。