css has实现网格元素悬浮放大效果代码-html代码-BFW代码库

css has实现网格元素悬浮放大效果代码

代码语言：html

所属分类：悬停

代码描述：css has实现网格元素悬浮放大效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        /* same as HTML value */
        grid {
          display: grid;
          width: 90vmin;
          aspect-ratio: 1;
          grid-template-columns: repeat(10, 1fr);
          gap: 3vmin;
        }
        
        grid > g {
          background: #FAD089;
          cursor: pointer;
          z-index: 0;
          transition: 0.5s;
        }
        
        g:hover {
          background: #ED303C;
          transform: scale(1.55);
          z-index: 3;
        }
        
        g:hover + g,
        g:hover + g + g + g + g + g + g + g + g + g + g,
        g:has(+ g:hover),
        g:has(+ g + g + g + g + g + g + g + g + g + g:hover) {
          background: #F5634A;
          transform: scale(1.35);
          z-index: 2;
        }
        
        g:hover + g + g + g + g + g + g + g + g + g,
        g:hover + g + g + g + g + g + g + g + g + g + g + g,
        g:has(+ g + g + g + g + g + g + g + g + g:hover),
        g:has(+ g + g + g + g + g + g + g + g + g + g + g:hover) {
          background: #FF9C5B;
          transform: scale(1.25);
          z-index: 1;
        }
        
        /* fix edge cases */
        g:nth-child(10n):hover + g,
        g:nth-child(10n):hover + g + g + g + g + g + g + g + g + g + g + g,
        g:has(+ g + g + g + g + g + g + g + g + g:nth-child(10n):hover),
        g:nth-child(10n+1):hover + g + g + g + g + g + g + g + g + g,
        g:has(+ g + g + g + g + g + g + g + g + g + g + g:nth-child(10n+1):hover),
        g:has(+ g:nth-child(10n+1):hover) {
          background: #FAD089;
          transform: scale(1);
          z-index: 0;
        }
        
        body {
          margin: 0;
          min-height: 100vh;
          display: grid;
          place-content: center;
        }
    </style>


</head>

<body>
    <grid>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
        <g></g>
 .........完整代码请登录后点击上方下载按钮下载查看