我们可以像 :hover 一样在 css 中制作 onclick 效果吗？ [复制]答案

【问题标题】：Can we make onclick effect in css like we have :hover? [duplicate]我们可以像 :hover 一样在 css 中制作 onclick 效果吗？ [复制]
【发布时间】：2010-01-30 13:30:06
【问题描述】：

当我单击 + 图标时，我正在为网站制作 Accordin，然后将显示另一个 div。我为此使用jquery。但这是否可以在 css 中通过单击另一个元素打开一个 div

【问题讨论】：

标签： css xhtml

【解决方案1】：

使用严格的 CSS，这是不可能的。使用 jQuery：

$("#idOfPlus").click(function() { 
  $("#myPlusDiv").show();
});

【讨论】：

【解决方案2】：

是的，focus 伪类是可能的：

<html>
<head>
<style type="text/css">
#hidden { display: none; border: 2px solid green; cursor: default; }
a {text-decoration: none;}    /* unvisited link */
a, div:visited { color: blue; }
a:focus #hidden { color: black; display: block; }
</style>
</head>

<body>
<a href="#">Click to show box
<div id="hidden">More information!<br/>Click outside to remove</div>
</a>
</body>
</html>

即使这样做（有点）你想要的它也不可用，因为你的框在链接中，因此可以点击。在框外单击时，它会关闭。所以除非这对你来说不是问题，否则我不得不说这对我来说似乎也有点不可能......

（除非其他人在使用 CSS 方面比我更好，并且可以想出更聪明的方法）

编辑：如果你找到另一个支持焦点伪类的 HTML 元素，它可能比我的示例中使用 <a> 元素更好。

【讨论】：

怎么样？我说的是点击效果
你能定义一下“点击效果”是什么意思吗？

【解决方案3】：

使用纯 CSS 是不可能的。您可以选择任何 JavaScript 框架。

【讨论】：

【解决方案4】：

您可以将图标设置为指向自身或不指向任何内容的锚点 (href="#")，然后使用 :active 触发类更改。但唯一的问题是，一旦他们不点击，它就会返回到非活动状态，所以你的手风琴会在打开时尽快关闭，除非你有另一个规则来保持课程。

【讨论】：