极客观点
项目管理
HarmonyOS
现在有一张卡片如下图
需求当鼠标悬停在绿色图片上, 将外面的 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)
但是页面给有选中这个元素, 不知道是什么原因?
看起来选择器应该这样书写:
你那样书写只会让
.default-image在经过时生效。抱歉没有仔细看问题描述
我从CodePen上面模拟了一下同样可以实现经过之后文字变红的效果，你可以检查一下你的CSS变量是否设置正确。
P.S. 如果确定
--bs-red变量声明好了，请确认你的浏览器的版本是支持:has()伪类的 👉 :has() | Can I use