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

巴特西

H5取经之路——添加hover实现特定效果

最新文章

热门文章