css - 在纯css中单击其父div时如何使子div可见

Question

我有一个 html 结构，通常具有“内容类”的 div 对用户可见，而具有“内容提示”的 div 是可见的，直到用户单击或将鼠标悬停在“类头”的 div 上。

<div class='head'> 
   <div class='content'>  content </div>  <!- visible -->
   <div class='tip'>  tip </div>   <!- invisible -->
</div>

当然，我可以使用代码使“类提示”在我单击父元素时显示。但是，我只是好奇是否可以使用纯 css 来做到这一点。

我在网上找到了一种 css 技术

.to-be-changed {
    color: black;
}

input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

演示有效，但它适用于输入元素和检查事件，当涉及到 div 元素时如何做

我也试过这个

.head.hover ~ .tip {
    color: red;
}

.tip {
    color: black;
}

但由于某种原因不起作用

score 4 · Accepted Answer

您的 CSS 无法正常工作的原因是两个小错误。

首先，.head.hover定义两个类选择器.head，.hover而您确实想要:hover用户操作伪类。

其次，.head.hover ~ .tip使用~通用的兄弟组合器，它只适用于.head.hover前面带有的元素.tip，即元素必须“在文档树中共享相同的父级”。您可以使用后代组合器或子组合器来定位.tip child。我在以下示例中使用了后者：

所以修复这些问题会导致 CSS：

.head:hover > .tip {
    color: red;
}

.tip {
    color: black;
}

这会改变悬停时的提示颜色。

关于 CSS 点击事件，有许多不同的方法来实现 CSS点击事件，如您链接到的博客中所讨论的。

一种可能适合您的情况的方法是:focus方法，它依赖于具有tabindex.

HTML

<div class="head" tabindex="1"> 
   <div class="content">  content </div>
   <div class="tip">  tip </div>
</div>

CSS

.head .tip {
    display:none;
}

.head:focus .tip {
    display:block;
}

1 回答 1