文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS悬停被强制-应用于孩子

问CSS悬停被强制-应用于孩子
EN

Stack Overflow用户
提问于 2021-08-20 19:02:31
回答 1查看 26关注 0票数 1

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

里面有.card。

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

对于上下文，这是一个基于悬停jQuery显示/隐藏图像的图库。我觉得这些脚本是不相关的。

您是否看到像我一样对子.card应用.col :hover？col悬停时卡片高亮显示。应该是整个颜色的亮点

下面是我的代码：

代码语言：javascript
复制
    --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：

代码语言：javascript
复制
    <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
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-20 19:06:37

您不应该在col和:hover之间使用空格，请尝试如下所示：

代码语言：javascript
复制
.col:hover {
    background-color: #74ece2;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68867000

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档