media (hover: none)实现悬浮隐藏按钮
代码语言:html
所属分类:布局界面
代码描述:media (hover: none)的用法,现悬浮隐藏按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li:hover {
--edit-opacity: 1;
}
@media (hover: none) {
li {
--edit-opacity: 1;
}
}
.list {
margin: 0;
padding: 0 16px;
list-style: none;
width: 100%;
max-width: 400px;
}
.list li {
padding: 12px 0;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
.list li:not(:last-child) {
border-bottom: 1px solid #D1D6EE;
}
.list li span {
display: block;
}
.list li button {
-webkit-appearance: none;
backgr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0