Can we make onclick effect in css like we have :hover? [duplicate]_问答_开发者

Can we make onclick effect in css like we have :hover? [duplicate]

开发者 https://www.devze.com 2022-12-19 03:14 出处：网络

This question already has answers here: 开发者_运维技巧 Can I have an onclick effect in CSS? (14 answers)

相关专题：css xhtml

This question already has answers here: 开发者_运维技巧 Can I have an onclick effect in CSS? (14 answers) Closed 3 years ago.

I'm making a Accordin for a site when i will click on + icon then another div will show. i'm using jquery for this. but is this possible in css to open a div on click on another element

With strictly CSS, no this isn't possible. With jQuery:

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

Yes it is possible with the focus pseudo-class:

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

Even though this does (kinda) what you want it is not usable since your box is in the link and thus clickable. And when clicking outside the box, it is closed. So unless this is not a problem to you, I have to say it seems kinda impossible for me as well...

(Unless someone else is better than me in using CSS and can think of something more clever)

Edit: If you find another HTML element that supports the focus pseudo-class, it might be better than using an <a> element as my example does.

It is not possible using plain CSS. You can opt for any javascript framework.

You can make the icon an anchor that points to itself or nothing (href="#") and then use :active to trigger the class change. But the only catch is that as soon as they are not clicking, it will return to the non-active state, so your accordion would close as fast as it opened unless you had another rule to hold the class.