CSS 强制悬停 - 应用于 child

Question

我有一个 .col 和 .col :hover。

里面，我有.card。

.col :hover 正在应用于 .card，我不知道为什么！

对于上下文，这是一个基于悬停 jQuery 的 shows/hides 图片的图库。我认为脚本不相关。

你看到 .col :hover 像我一样被应用到 child .card 了吗？ [卡片在 col 悬停时突出显示。应该是整个col高亮][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

Answer 1

你不应该在 col 和 :hover 之间使用 space，试试这样：

.col:hover {
    background-color: #74ece2;
}

CSS 强制悬停 - 应用于 child

CSS hover being forced - applied to child

html

css

hover

parent-child