0

它真的不存在任何纯 css 方法，我可以在我的网站上单击一些所需的 :active div id，并且可能会在它之外显示另一个 div 吗？到目前为止，我发现的一切要么是用 CSS 完成的不好的方式，要么是用 JQuery 或 Javascript 完成的方式？任何人，任何人我需要的纯 CSS。谢谢！

4

6 回答 6

1

在 CSS div 中没有 onclick 处理程序.. 你需要把你的 div 里面

'<一>'

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

于 2013-01-15T15:06:50.410 回答
0

你可以试试:target

或者使用 child A B、 nextA+B或兄弟A~B选择器。

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

于 2013-01-15T15:05:31.787 回答
0

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

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

于 2013-01-15T15:07:42.557 回答
0

你可以试试，: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

于 2013-03-14T02:32:39.527 回答
0

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中查看更多信息

于 2017-10-29T06:23:05.780 回答
0

这是一个显示隐藏的纯 CSS方法。将“标题”内容放在容器元素中。将“信息”内容放在“标题”下方但在同一容器内。现在，样式行为以响应点击活动。

.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>

优点一次只关注一个信息下拉列表的用户。较长的“列表”中的简单下拉双击关闭打开导航。不干扰浏览历史。

缺点就基本 HTML/CSS 而言（工具提示数据标题属性替换标题属性：单击/点击 HTML 数据层以覆盖下拉标题）？JQuery，然后是程序学，绝对可以超越这一优势。

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

使用 CSS类似线程在单击时显示/隐藏 div 。

HTML/CSS 显示/隐藏多个元素？主要是脚本解决方案

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

于 2016-11-19T05:54:03.157 回答