css :has 用法问题?

作者站长头像
站长
· 阅读数 5

现在有一张卡片如下图

css :has 用法问题?

需求当鼠标悬停在绿色图片上, 将外面的 div 字体改成红色在网上找了一下, 选择父容器用的是 :has 伪类

以下是全部代码

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

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Html Template</title>
        <link rel="stylesheet" href="http://localhost:8000/node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://localhost:8000/node_modules/raxly-free/raxly-free.css">
    </head>

    <body>
        <style>
            :root {
                --bs-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
                --bs-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                --bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
                --bs-shadow-none: none;
            }

            .unknown-1 {
                box-shadow: var(--bs-shadow);
            }

            .default-image {
                height: 230px;
            }

            .unknown-1:has(.default-image:hover) {
                color: var(--bs-red);
            }
        </style>
        <header></header>
        <main>
            <section class="rxc-wrap">
                <div class="container py-5">
                    <div class="row">
                        <div class="col-3">
                            <div class="unknown-1 card border-0">
                                <a href="#"><img src="100.png" class="default-image card-img-top"></a>
                                <div class="card-body">
                                    <h5 class="card-title">Name</h5>
                                    <p class="card-text">This is a test description, This is a test description.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer></footer>
        <script src="http://localhost:8000/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="http://localhost:8000/node_modules/jquery/dist/jquery.min.js"></script>
        <script src="http://localhost:8000/node_modules/raxly-free/raxly-free.js"></script>
        <script></script>
    </body>

</html>

我在 default-image:hover 的情况下给外面的 .unknown-1 设置样式.unknown-1:has(.default-image:hover)但是页面给有选中这个元素, 不知道是什么原因?

回复
1个回答
avatar
test
2024-07-08

看起来选择器应该这样书写:

.unknown-1:has(.default-image):hover { ... }

你那样书写只会让 .default-image 在经过时生效。


抱歉没有仔细看问题描述

需求当鼠标悬停在绿色图片上, 将外面的 div 字体改成红色

我从CodePen上面模拟了一下同样可以实现经过之后文字变红的效果,你可以检查一下你的CSS变量是否设置正确。

answer image


P.S. 如果确定 --bs-red 变量声明好了,请确认你的浏览器的版本是支持 :has() 伪类的 👉 :has() | Can I use

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容