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

 

转载于:https://www.cnblogs.com/pandapang/p/6537421.html