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

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

鼠标点击实现划掉文字效果相关推荐

生成划掉的字_哪种备忘录划删除线,能划掉文字在字中间划线的便签
生活在信息爆炸的年代,手机备忘录便签已经是不可缺少的工具软件,把自己需要做的事情一项一项地列到备忘录上,然后完成一项划掉一项,这样做不仅不容易忘事,还可以提高工作效率,看着自己划掉的事情越来越多,会有 ...
基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览源码下载实现的代码. html代码: <input type=&quo ...
鼠标点击出现小爱心的效果
鼠标点击出现小爱心的效果** 下面是js内容,引入即可! <script>(function(window,document,undefined){var hearts = [];wind ...
latex公式文字划掉的效果
当我们想要强调某公式是错误的时候,可以用线划掉,latex可以使用宏包实现这个效果,使用方法如下: \usepackage{cancel} \cancel{公式内容} 或 \bcancel{公式内容 ...
textview文字被划掉的效果
textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); //下划线 textView.getPaint().setAntiAlias(tr ...
php富强民主,前端网页鼠标点击弹出浮动文字–“富强、民主、和谐”点击特效...
效果添加点击特效,点击页面会显示:"富强", "民主", "文明", "和谐", "自由", &q ...
CSS--滚动条样式，鼠标点击小手，文字省略显示
1.鼠标悬停(变小手) /*鼠标悬停变小手(全局APP.vue)*/* {cursor: pointer; } 2.滚动条样式(全局APP.vue) ::-webkit-scrollbar {widt ...
为什么wps office在编辑文字鼠标点击一下整篇文字的背景就立刻变为灰色的
一句话: 按ctrl+shift+F9就可以了知识扩展: Ctrl+Shift+功能键 Ctrl+Shift+F6 组合键前往上一个窗口 Ctrl+Shift+F7 组合键更新 Word 源文档 ...
为什么Word2007在编辑文字鼠标点击一下整篇文字的背景就立刻变为灰色的
https://zhidao.baidu.com/question/436065874.html 按ctrl+shift+F9就可以了

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

鼠标点击实现划掉文字效果相关推荐

最新文章

热门文章