H5取經之路——添加hover實現特定效果

一、鼠標指上后顯示二維碼，效果圖如下：

鼠標未指上時：　　鼠標指上后：

代碼如下：

.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時，反選，給其設置一個透明度。