前端案例-6 鼠标经过表格行给出颜色标识

KathyLJQ

于 2021-04-10 12:36:26 发布

阅读量192

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/kathyljq/article/details/115570940

版权

本文分享了一种前端实现方法，当鼠标经过表格行时，该行会显示特定的颜色标识，增强了用户体验。通过CSS选择器和:hover伪类，可以轻松实现这一交互效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        table {
    
            margin: 100px auto;
            width: 800px;
            border-spacing: 0;
            text-align: center;
        }
        
        table tr:nth-child(1) {
    
            background-color: rgb(135, 206, 235);
        }
        
        table tr:nth-child(n+2) {
    
            border-bottom: 1px solid black;
        }
        
        th {
    
            font-size: 14px;
            padding-top: 5px