「クリックしたら実行」をCSSだけで

こんにちは。
「クリックしたら〇〇」というものを擬似要素などを使ってできないでしょうか？
:activeでもいいのですが、activeだと「クリックしている間」になってしまいます。
クリックしたら永久に(?)その状態を保持したいのですが、やり方はありますか？
jQueryやjavascriptを使えば簡単なのでしょうが、CSSでやってみたいです(-o-;すみません...

それと、「.hoverをホバーしたら.contentを表示/非表示にする」ってできますか？(CSS)
たとえば、
|class="hover"|

---content(display:none)---

で、ホバーすると

|class="hover"|

---content(display:block)---

となるようにしたいです。

すみません、説明がわかりにくいですが....
ふたつのどちらかでもいいので、回答いただけるとうれしいです。

行動規範の内容に同意します

回答3件

非表示のチェックボックスとラベルと :checked で

http://jsbin.com/luroye/2

lang
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset=utf-8 />
5  <title></title>
6  <style>
7  .wrap {
8    position: relative;
9  }
10  .check {
11    position: absolute;
12    z-index: 99999;
13    visibility: hidden;
14  }
15  .box {
16    width: 320px;
17    height: 240px;
18    background-color: red;
19  }
20  input:checked ~ .box {
21    background-color: blue;
22  }
23  </style>
24</head>
25<body>
26  <label class="wrap">
27    <input class="check" type="checkbox">
28    <div class="box"></div>
29  </label>
30</body>
31</html>

投稿2014/12/25 02:10

ngyuki

総合スコア4516

ckaposndbbba

2014/12/25 12:52

そういうやり方もあったんですね！ :checkedは盲点でした。ありがとうございます！

行動規範の内容に同意します

http://black-flag.net/css/20110127-2478.html
この辺の記事が参考になるでしょうか？

投稿2014/12/24 03:17

TaMaMhyu

総合スコア1356

ckaposndbbba

2014/12/24 03:23

:targetなんてあったんですね。ブラウザ対応が気になりますが...でも、こういうのを実現するのってやっぱりブラウザが限られますよね(-o-; でも、結構簡単に書けるんですね。ありがとうございます！

行動規範の内容に同意します

ベストアンサー

.hover と .content の要素の位置関係を ~ とか + とかで表せば、ある要素の状態を元に別の要素に適用されるスタイルを制御できます。

.hover:hover ~ .content は、.hover:hover の弟要素の .content、のような意味だったと思います。

lang
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <style>
7    .hover {
8        background-color: red;
9        width: 320px;
10        height: 240px;
11    }
12    .content {
13        background-color: blue;
14        width: 320px;
15        height: 240px;
16    }
17    .hover:hover ~ .content {
18        display:none;
19    }
20    </style>
21</head>
22<body>
23    <div class="hover"></div>
24    <div class="content"></div>
25</body>
26</html>