Question

它是否真的不存在任何纯css方法，我可以点击一些所需的：我的网站上的活动div id，也许除了它之外还有另一个div出现？到目前为止我发现的一切都是用CSS做的坏方法或用JQuery或Javascript完成的方法？任何人，我需要任何人PURE CSS。谢谢！

Answer 1

CSS div中的

没有onclick处理程序..你需要将你的div放在

中

'＆LT; a＆gt;'

标签.. 所以你可以像链接一样处理它...你将拥有鼠标悬停的功能和类似的东西.. 看看这个thread

Answer 2

您可以尝试:target

或使用子A B，下一个A+B或兄弟A~B选择器。

但纯css方法无法像添加/删除类的简单js那样广泛地保存和操作块的状态。

Answer 3

为特定html元素指定CSS时，您可能会影响接收鼠标事件的元素的样式。要在单击特定元素时显示另一个元素，您需要更改另一个不是鼠标事件目标的html元素的样式，因此需要使用javascript或者像vb这样的专有Web脚本语言来执行您想要的操作做。

我要说的最后一件事是CSS用于为单个元素或元素组添加样式效果。它不打算在网站上实现繁重的程序功能。这就是javascript的发明。

Answer 4

您可以尝试:active伪类。但即便如此，你还需要包装你想要展示的内容。无论如何，我的尝试是：

<a>
  Click and Hold Me!
  <div class="expand">
    I am the expander!
  </div>
</a>

CSS

a {text-decoration: none;}
a .expand {height: 0; overflow: hidden; transition: height 5s;}
a:active .expand {height: 1em; overflow: visible; transition: height 5s;}

小提琴：http://codepen.io/praveenscience/pen/KArEB

Answer 5

这是一个显示隐藏的纯CSS 方法。地点＆＃39;标题＆＃39;容器元素中的内容。放置信息＆＃39;内容，标题＆＃39;但在同一个容器内。现在，样式行为响应点击活动。

.dropdowntitle, article > * { cursor: pointer; }
.dropdowntitle:focus + .dropdowninfo { display:block; }
.dropdowninfo { background-color:inherit; display:none; height:inherit; }

<article>
<h3 class="dropdowntitle" tabindex="1">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="2">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="3">Title</h3>
<p class="dropdowninfo">Info</p>
</article>

专业人士一次只关注一个信息下拉菜单。简单的下拉式双击更长的“＆＃39;列表中的关闭 - 打开导航”。不会干扰浏览历史记录。

缺点基本的HTML / CSS可以去（工具提示data-title属性替换title属性：点击/点击HTML数据层覆盖下拉标题）？ JQuery，然后是程序设计，绝对是这个。

http://tympanus.net/codrops/2012/12/17/css-click-events）我试过的复选框和目标黑客，但没有任何改进。

Show / hide div on click with CSS类似的帖子。

HTML/CSS show/hide multiple elements?主要是脚本解决方案

https://support.office.com/en-us/article/Create-or-edit-a-hyperlink-5d8c0804-f998-4143-86b1-1199735e07bf同时和独立地显示隐藏多个下拉菜单，程序化。

Answer 6

CSS无法处理onClick事件。您可以使用Javascript .onclick（）函数。但CSS有Pseudo-classe可能会有所帮助：

a:link {color:#FF0000;}    /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;}   /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;}  /* selected link - the user has clicked the link and the browser is loading the new page */

在https://www.w3schools.com/css/css_pseudo_classes.asp

中查看详情

PURE CSS显示/隐藏div方式？

6 个答案:

小提琴：http://codepen.io/praveenscience/pen/KArEB