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个回答
test
2024-07-08
看起来选择器应该这样书写:
.unknown-1:has(.default-image):hover { ... }
你那样书写只会让 .default-image
在经过时生效。
抱歉没有仔细看问题描述
需求当鼠标悬停在绿色图片上, 将外面的 div
字体改成红色
我从CodePen上面模拟了一下同样可以实现经过之后文字变红的效果,你可以检查一下你的CSS变量是否设置正确。
P.S. 如果确定 --bs-red
变量声明好了,请确认你的浏览器的版本是支持 :has()
伪类的 👉 :has() | Can I use
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容