如何使用 CSS 创建图标悬停效果？

CSS：悬停选择器： :hover选择器（或 CSS 伪类）在用户使用指针设备与元素交互时匹配。它通常在用户将光标（鼠标指针）悬停在元素上时触发。

方法：

• 1：当鼠标光标悬停时，所有锚标记都以 CSS 声明（在大括号内）为目标。

  句法：

  a:hover {
      css declarations;
  }

• 2：类名称为“icon”的标签的目标是在鼠标光标悬停时将其背景颜色更改为蓝色。

  句法：

  .icon:hover {
      background-color: blue;
  } 

• 3： ID为“target”的目标元素在悬停时会转换为1.5的比例尺。参考 CSS 比例

  句法：

  #target:hover {
      transform: scale(1.5);
  }

为了使我们的悬停更吸引人且更具装饰性，我们还可以为其添加 CSS 过渡。

示例：我们使用:hover选择器和各种 CSS 的组合在社交媒体图标上创建悬停效果。这个项目一定会帮助你更深入地理解悬停效果。

HTML

  

    
    
    
  
    
        .container {
            background-color: green;
            height: 20vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
        .link {
            height: 70px;
            width: 70px;
            background-color: #caf7e3;
            border-radius: 35px;
            text-align: center;
            margin: 7px;
            line-height: 80px;
        }
  
        a i {
            transition: all 0.3s linear;
        }
  
        a:hover i {
            transform: scale(1.5);
        }
  
        .youtube:hover {
            color: red;
        }
  
        .facebook:hover {
            color: blue;
        }
  
        .instagram:hover {
            color: #e11d74;
        }
  
        .twitter:hover {
            color: #00adb5;
        }
  
        .github:hover {
            color: black;
        }
  
        .linkedin:hover {
            color: #04009a;
        }
    

  

    GFG social media link icons (Hover over the icon)
  
    
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
    

  

输出：