【发布时间】：2021-08-21 18:12:55
【问题描述】：
我有一个.col 和.col :hover。
在里面，我有.card。
.col :hover 被应用到.card，我不知道为什么！
就上下文而言，这是一个基于悬停 jQuery 显示/隐藏图像的画廊。我认为脚本不相关。
您是否看到像我一样将.col :hover 应用于孩子.card？
[在 col 悬停时突出显示卡片。应该是整个col highlight][1]
这是我的代码：
--main: whitesmoke;
--pop: #62cac2;
--dark: rgb(17, 21, 22);
}
body{
background:gray;
}
#gallery-container {
background-color: var(--main);
margin:auto;
height: 700px;
width:600;
}
#gallery {
background-color: var(--main);
margin:auto 8px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.row{
height: 210px;
background-color: powderblue;
display:flex;
text-align: center;
}
.col{
margin:auto 6px;
float: left;
background: var(--pop);
height: 95%;
width: 33%;
border-radius: 6px;
}
.col :hover {
background-color: #74ece2;
}
.card {
padding: 6px;
width: 80%;
margin: auto;
}
HTML：
<section id="gallery-container">
<div id="gallery">
<!--Row 1-->
<div class="row">
<div class="col">
<div id="card-1" class="card">
<div class="img-container">
<img class="center show active" src="./img/Curtis-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Curtis-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Curtis-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Curtis-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Curtis-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Curtis-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Curtis-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Curtis-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Curtis-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-2" class="card">
<div class="img-container">
<img class="center show active" src="./img/Abbey-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Abbey-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Abbey-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Abbey-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Abbey-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Abbey-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Abbey-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Abbey-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Abbey-tl.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-3" class="card">
<div class="img-container">
<img class="center show active" src="./img/Lander-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Lander-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Lander-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Lander-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Lander-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Lander-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Lander-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Lander-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Lander-tl.JPG" alt="Photo of staff member">
</div>
</div>
</div>
</div>
<!--Row 2-->
<div class="row">
<div class="col">
<div id="card-4" class="card">
<div class="img-container">
<img class="center show active" src="./img/Ruby-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Ruby-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Ruby-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Ruby-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Ruby-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Ruby-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Ruby-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Ruby-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Ruby-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-5" class="card">
<div class="img-container">
<img class="center show active" src="./img/Julio-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Julio-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Julio-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Julio-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Julio-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Julio-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Julio-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Julio-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Julio-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-6" class="card">
<div class="img-container">
<img class="center show active" src="./img/Gordon-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Gordon-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Gordon-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Gordon-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Gordon-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Gordon-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Gordon-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Gordon-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Gordon-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
</div>
<!--Row 3-->
<div class="row">
<div class="col">
<div id="card-7" class="card">
<div class="img-container">
<img class="center show active" src="./img/Damon-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Damon-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Damon-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Damon-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Damon-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Damon-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Damon-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Damon-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Damon-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-8" class="card">
<div class="img-container">
<img class="center show active" src="./img/joe-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Joe-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Joe-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Joe-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Joe-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Joe-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Joe-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Joe-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Joe-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
<div class="col">
<div id="card-9" class="card">
<div class="img-container">
<img class="center show active" src="./img/Chance-c.JPG" alt="Photo of staff member">
<img class="top" src="./img/Chance-t.JPG" alt="Photo of staff member">
<img class="bottom" src="./img/Chance-b.JPG" alt="Photo of staff member">
<img class="right" src="./img/Chance-r.JPG" alt="Photo of staff member">
<img class="left" src="./img/Chance-l.JPG" alt="Photo of staff member">
<img class="bottom-r" src="./img/Chance-br.JPG" alt="Photo of staff member">
<img class="bottom-l" src="./img/Chance-bl.JPG" alt="Photo of staff member">
<img class="top-l" src="./img/Chance-tl.JPG" alt="Photo of staff member">
<img class="top-r" src="./img/Chance-tr.JPG" alt="Photo of staff member">
</div>
</div>
</div>
</div>
</div>
</section>
</body>```
[1]: https://i.stack.imgur.com/6qCJP.png
【问题讨论】：
标签： html css hover parent-child