css实现悬浮不同的dom元素上显示不同的自定义鼠标样式效果代码
代码语言:html
所属分类:悬停
代码描述:css实现悬浮不同的dom元素上显示不同的自定义鼠标样式效果代码
代码标签: 不同 的 dom 元素 上 显示 不同 的 自定义 鼠标 样式 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } *:focus, *::before:focus, *::after:focus { outline: none; } * { font-family: monaco, courier; } body { position: relative; margin: 0; height: 100vh; background-color: #acd1d2; display: flex; justify-content: center; align-items: center; font-family: monospace; cursor: none; } #wrapper { position: relative; width: 70%; height: 80%; } #circle { position: fixed; z-index: 5; width: 32px; height: 32px; background-color: white; border-radius: 50%; pointer-events: none; transition: background ease-in 10ms, box-shadow ease-in 150ms, transform ease-in 150ms; /* promote it to its own layer to enable hardware accelerated rendering: */ transform: translate3d(0, 0, 0); } .box { height: 25%; margin: 0; display: flex; justify-content: center; align-items: center; } #box-1 { background-color: #e8edf3; } #box-1:hover ~ #circle { background-color: #e6cf8b; box-shadow: 0 0 0 0 transparent, inset 0em -0.3em 0.4em 0.2em #ca9e03a6; } #box-2 { background-color: #e6cf8b; } #box-2:hover ~ #circle { background-col.........完整代码请登录后点击上方下载按钮下载查看
网友评论0