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

最新推荐文章于 2023-11-20 11:21:35 发布

weixin_33701564

最新推荐文章于 2023-11-20 11:21:35 发布

阅读量280

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/iriliguo/p/7048356.html

版权

如图，是基于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>

转载于:https://www.cnblogs.com/iriliguo/p/7048356.html

weixin_33701564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击实现划掉文字效果

如图，是基于mui进行编码的，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-...
复制链接

扫一扫