zoukankan      html  css  js  c++  java
  • 鼠标点击实现划掉文字效果

    如图,是基于mui进行编码的,代码如下:

    <!DOCTYPE html>
    <html>
        
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
              mui.init();
        </script>
        <style>
            
    .cb {
                display: none;
            }
            .mark {
                position: relative;
                display: inline-block;
                 20px;
                height: 20px;
                border: 2px solid transparent;
            }
        .mark:before {
        content: "";
        display: none;
        position: absolute;
        top:50%;
        left: 25%;
        height: 4px;
         8px;
        border: solid black;
        border- 0 0 4px 4px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }/*画√,这是呈现在页面的钩钩*/
            .cb:checked~ .mark:before {
                display: block;
            }
            .cb:checked~ .con {
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        
       
    
    
        <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right"> 
                <label>
            <input type="checkbox" class="cb" checked>
            <span class="mark"></span>
            <span class="con">this is a test</span>
        </label>
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 2</a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 3</a>
        </li>
    </ul>
    
    
    </body>
    
    
    
    </html>
  • 相关阅读:
    第几天?
    农历02__资料
    农历01
    VC6_预编译头
    QWebEngine_C++_交互
    Qt570_CentOS64x64_02
    Qt570_CentOS64x64_01
    QWebEngineView_CssVariables
    Windows__书
    Win7SDK
  • 原文地址:https://www.cnblogs.com/iriliguo/p/7048356.html
Copyright © 2011-2022 走看看