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