如何使用 CSS 更改悬停在表格中的每个数据元素的不透明度？

有一个使用 HTML 制作的表格，其中数据元素设置为低不透明度。任务是在用户将鼠标悬停在数据元素上时更改特定元素的不透明度。

为了使表格看起来更好，我们将使用渐变色来设置表格数据元素的背景。在这种方法中，我们将使用 CSS 的 opacity 属性来完成任务。

opacity：图像中使用opacity 属性来描述图像的透明度。不透明度的值介于 0.0 到 1.0 之间，其中低值代表高透明度，高值代表低透明度。

方法：

• 首先制作带有定义表格及其数据的 HTML 文件。

  
    
  
      
   data 1
      
   data 2
      
   data 3
    
  
  

• 表格标题标签的样式为白色文本和渐变背景色。
• 对于表格数据元素标签不透明度最初设置为 0.7，浅渐变背景最初似乎褪色。
• 在hover ，元素的不透明度设置为 1，这使得元素清晰和定义。

  td:nth-child(odd):hover {
      opacity: 1;
  }
  

  对于 标签的所有奇数孩子

  td:nth-child(even):hover{
      opacity: 1;
  }
  

例子：

  

    
      
    

  

    
GeeksforGeeks
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
Name
Age
Address
Name 1
Age 1
Address 1
Name 2
Age 2
Address 2
Name 3
Age 3
Address 3
Name 4
Age 4
Address 4

  

输出：

您可以看到，当鼠标悬停在 元素上时，它们的不透明度变为 1，它们看起来更加清晰和明确。