鼠标点击实现划掉文字效果

如图，是基于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;
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
        }
    .mark:before {
    content: "";
    display: none;
    position: absolute;
    top:50%;
    left: 25%;
    height: 4px;
    width: 8px;
    border: solid black;
    border-width: 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>

 

posted @ 2017-06-19 13:51  iriliguo  阅读(1388)  评论(0)    收藏  举报