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; background: var(--background, #ECEFFC); color: #646B8C; border: none; outline: none; cursor: pointer; border-radius: 8px; padding: 4px 12px; margin: 0; line-height: 17px; font-family: inherit; font-size: 12px; font-weight: 500; opacity: var(--edit-opacity, 0); } .list li button:hover { --background: #E1E6F9; } body { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0