CSS不使用:hover隐藏div

简介

在CSS中，":hover"伪类通常用于当用户将鼠标悬停在一个元素上时，触发样式的更改。但是如果您想单击一个按钮或其他元素时，隐藏另一个div元素，该怎么办？本文将介绍如何使用CSS实现这一功能。

方法

在CSS中，我们可以使用通用同级选择器（~）来选中兄弟元素。结合使用:checked伪类和display属性，可以轻松地控制所选元素的显示和隐藏。

/*隐藏被选中的复选框后的兄弟元素*/
input:checked ~ .hide { 
  display: none;
}

将此代码片段添加到您的CSS中，并将“input”替换为您的选择器名称。现在，当所选元素被选中时，其兄弟元素将被隐藏。

<input type="checkbox"> 我是所选元素1
<div class="hide">我是要隐藏的元素1</div>

<input type="checkbox"> 我是所选元素2
<div class="hide">我是要隐藏的元素2</div>

您可以根据需要添加多个复选框和隐藏的元素。

结论

使用通用同级选择器（~）和:checked伪类，可以在不使用.hover的情况下轻松隐藏div元素。这是一种简单而有效的方法，可以提高您的Web应用程序的用户体验。