首页 > 其他分享 >两侧向中间闭合高亮效果

两侧向中间闭合高亮效果

时间:2023-12-08 14:47:01浏览次数:31  
标签:index 高亮 效果 两侧 闭合 li 中间

两个要点

1. z-index为任意值,包括负值,可实现与isolation: isolate;一样效果,生产独立的层级上下文

2. 绝对定位的元素scaleX宽度变化,扩大从中间向两侧扩大,缩小从两侧向中间缩小

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>两侧向中间高亮效果</title> 
    <style>
        li{
            position: relative;
            margin-top: 10px;
            background: lightblue;
            /* isolation: isolate; */
            z-index: 1;
        }
        li:before{
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #fff;
            transition: .3s ease-out;
        }
        li:hover{
            cursor: pointer;    
        }
        li:hover:before{
            transform: scaleX(0);
        }
    </style>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</body>
</html>

可参考此文的右侧导航的高亮效果 JavaScript 如何将一个迭代器转化为一个数组 

标签:index,高亮,效果,两侧,闭合,li,中间
From: https://www.cnblogs.com/mengff/p/17887116.html

相关文章

  • C# ListView失去焦点仍然保持选中的Item高亮
    1privatevoidlistView_Validated(objectsender,EventArgse)2{3if(listView.FocusedItem!=null)4{5listView.FocusedItem.BackColor=SystemColors.Highlight;6listView.FocusedItem.ForeColor=Color.White;......
  • activiti7.1.0.M6流程图预览和进度高亮查看
    activiti7移除了静态方法创建ProcessDiagramGenerator,需要创建DefaultProcessDiagramGenerator实例依赖:<properties><batik-transcoder.version>1.17</batik-transcoder.version><batik-codec.version>1.17</batik-codec.version>......
  • 当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”
    当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”。1.当div元素实现了左右居中时,当hover的时候设置width增大,那么宽度会默认从中间向两侧增加。(例子中的id=d1)2.一个未进行任何设置的div元素,当hover的时候设置width增大,那么宽度会默认向右增加。(例子中的id=......
  • el-menu 选择子菜单 父菜单没高亮
    /*子菜单active*/.page-sidebar.el-menu-item.is-active.iconfont-cahnge{color:#cc0000!important;}/*主菜单和子菜单同active*/.page-sidebar.el-submenu.is-active>.el-submenu__title{color:#cc0000!important;}.page-sidebar.el-subm......
  • <p>标签导致<script></script>的高亮显示丢失。
    最近在改程序发现,<script></script>下的标签里的高亮不见,而且就一个文件是这样。网上找了一下,都说是设置的问题,也有说主题bug导致。 改了一下代码,发现惊奇的又出现高亮了:<template#description><div><div>{{item.check_man}}</d......
  • vxe-table 高亮第一行
    官网给的事例是这样的: 上面是高亮第一行。 加载完成后,高亮第一行数据。VxeBasicTable中是这样处理:...constdata=awaitgetDataFromServer(params);setTimeout(()=>{//高亮第一行let$table=tableRef.value;if($t......
  • monaco editor自定义代码解析和代码高亮颜色配置
    //目前使用到的关于解析配置exportconstlanguage={//是否区分大小写,true区分ignoreCase:false,//关键字keywords:['aaa','bbb'],//类型关键字typeKeywords:[],//代码解析配置格式为[正则表达式,对应的类型如(string,number,comment)]tokenizer:......
  • [HTML]自闭合标签写法
    简单讨论。以br为例:正规写法:<br/>但是写成<br>在html5也不算错如果写<br></br>,浏览器会认为第二个标签写错了,会帮你改成<br><br>。具体学习指路→   https://www.cnblogs.com/dangjian/p/4238150.html......
  • 11月3日前端需要学习的知识、自闭合标签、meta标签、div标签
    目录前端需要学习的知识生成的网页类型静态网页动态网页网页的架构c/s架构b/s架构浏览器的特别用法第一种结合python来使用第二种将文件拖入浏览器里面(这就符合渲染了)重点HTML首先!DOCTYPEhtml其次就是html到/html还有就是head到/head的内部最后就是body到/body总结其它的标签......
  • Winform高亮显示图标和标题
    效果下如图: 创建ActivateButton公用方法,代码如下:privatevoidActivateButton(objectsenderBtn,Colorcolor1,Colorcolor2,Colorcolor3){if(senderBtn!=null){DisableButton();//B......