Question

我有一个html结构，通常用户可以看到带有'content class'的div，而带有'content tip'的div是可见的，直到用户点击或将鼠标悬停在'class head'的div上。

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

当然，我可以使用代码在单击父元素时显示“类提示”。但是，我很好奇是否可以用纯CSS进行。

我在web

上找到了一种css技术

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

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

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

我也试过这个

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

.tip {
    color: black;
}

但由于某种原因无效

Answer 1

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

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

其次，.head.hover ~ .tip正在使用~一般同级组合子，它只适用于.head.hover前面带有.tip元素的元素，即元素必须“在文档树中共享同一个父”。您可以使用descendent combinator或child combinator定位.tip 孩子。我在下面的例子中使用了后者：

因此修复这些问题会产生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;
}

See demo

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

1 个答案: