zoukankan      html  css  js  c++  java
  • 鼠标悬停改变长度

    栅格系统中鼠标悬停时向左改变宽度

    关键词:

    transform: scaleX(1.2)
    transform-origin

    栅格一行两列布局,,左侧图片,右侧ul li列表

    html代码:

    <div class="row tet">
            <div class="col-12 col-md-8">
                <div class="ig"></div>
            </div>
            <div class="col-11 col-md-8">
                <ul>
                    <li><a href="">第一个实例</a></li>
                    <li><a href="">第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例第二个实例</a></li>
                    <li><a href="">第三个实例</a></li>
                </ul>
            </div>
        </div>
    

      

    .tet是行,设置一个行高

    左侧设置一个div用来装图片,图片以背景展示

    右侧li平分行高,col-11和col-12定义列高实现左右栅格高度对齐

    鼠标悬停li时,以右下角为基点X轴(宽度)放大1.2倍,从而实现鼠标悬停右侧向左高亮突出

    css代码:

    .tet {
                height: 27rem;
                 1400px;
                margin: auto;
            }
    
            ul {
                height: 100%;
            }
    
            ul li {
                height: 9rem;
                line-height: 9rem;
                text-align: center;
                background-color: darkblue;
                vertical-align: middle;
            }
    
            .col-11,
            .col-12 {
                height: 27rem;
                padding: 0;
            }
    
            .col-11 {
                float: right;
            }
    
            .ig {
                height: 100%;
                background: url(images/t2.png) no-repeat;
                background-size: cover;
            }
    
            ul li a {
                padding: 20px;
                line-height: 1.5;
                display: inline-block;
                vertical-align: middle;
            }
    
            ul li:hover {
                background-color: #fff;
                transform: scaleX(1.2);
                -ms-transform: scaleX(1.2);
                -moz-transform: scaleX(1.2);
                -webkit-transform: scaleX(1.2);
                -ms-transform-origin: 100% 100%;
                -moz-transform-origin: 100% 100%;
                -webkit-transform-origin: 100% 100%;
            }
    

      

    展示区:

  • 相关阅读:
    递归函数的写法笔记
    Spring项目中执行Java脚本
    关于秒杀的系统架构优化思路
    分布式搜索引擎Elasticsearch性能优化与配置
    分布式搜索引擎ElasticSearch+Kibana (Marvel插件安装详解)
    分布式搜索引擎Elasticsearch的查询与过滤
    Linux 下编译升级 Python
    搭建通过 ssh 访问的 Git 服务器
    分布式搜索引擎Elasticsearch的简单使用
    PHP 源码学习之线程安全
  • 原文地址:https://www.cnblogs.com/chalkbox/p/12623397.html
Copyright © 2011-2022 走看看