将悬停添加到网格（看起来像 table）

Question

我正在尝试将悬停添加到我的网格中。我确实设法对包括整个 div 在内的每个单元格都这样做了，但是当我尝试对整行做任何事情时，什么也没有发生！（请忽略开头的彩色行）

HTML:

<!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>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 

<link rel="stylesheet" href="test.css">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 text-lg-start text-start text-sm-right text-md-start col-sm-12 col-md-6  col-lg-3">Make</div>
        <div class="col-12 text-lg-center text-center text-sm-center text-md-center col-sm-12 col-md-6 col-lg-3">Things</div>
        <div class="col-12 text-lg-center text-center text-sm-center text-md- center col-sm-6 col-md-6  col-lg-3">Go</div>
        <div class="col-12 text-lg-end text-end text-sm-end col-sm-6 col-md-6 text-md-end col-lg-3 ">Right</div>
    </div>
    
</div>
</div>

<div class="container"> 
    
    <div class="row">
            <div id="dif" class="col">animal</div>
            <div id="dif" class="col">price</div>
            <div id="dif" class="col">image</div>
    </div>
    <div class="row">
        <div id="td" class="col">kitten</div>
        <div id="td" class="col">70$</div>
        <div id="td" class="col">             <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-circle " class="rounded" alt="Sheep"></div>
    </div>
    <div class="row">
        <div id="td" class="col">puppy</div>
        <div id="td" class="col">80$</div>
        <div id="td" class="col">             <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep"></div>
    </div>
    <div class="row">
        <div id="td" class="col">bunny</div>
        <div id="td" class="col">30$</div>
        <div id="td" class="col">             <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep"></div>
    </div>



</div>
</body>
</html>

CSS:

.row {
    margin-bottom: 10px;
}

.row > div {
    height: 50px;
    font-size: x-large;
    text-align: center;

}

.row > div:nth-child(1) {
    background: red
}

.row > div:nth-child(2) {
    background: yellow
}

.row > div:nth-child(3) {
    background: blue
}

.row > div:nth-child(4) {
    background: purple
}

#dif {
    background:white;
    font-weight: 900;
    border: solid black 1px;
     height: 150px;
}

#td {
    height: 150px;
    background:white;
    border: solid black 1px;
    margin: 0px;


}

.row {
   margin: 0px
}

.row:hover{background-color:gray;}

img {
    border-radius: 50%;
    
}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 1

删除以下代码，行将以灰色突出显示：

.row > div:nth-child(1) {
    background: red
}

.row > div:nth-child(2) {
    background: yellow
}

.row > div:nth-child(3) {
    background: blue
}

.row > div:nth-child(4) {
    background: purple
}

从

中删除background:white;

#td {
    height: 150px;
    background:white;
    border: solid black 1px;
    margin: 0px;
}

将悬停添加到网格（看起来像 table）

Adding hover to a grid ( that look like table)

grid

hover