HTML :hoverで表示

html
1<body>
2   <h2>aaa</h2>
3   <h2 class="test" style="display:none">bbb</h2>
4</body>

で、aaaがhoverされたときにbbbを表示したい場合どんなcssを書けばいいですか？

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

回答2件

ベストアンサー

CSSだけでもできていますが。。

html
1<body>
2   <h2 class="aaa">aaa</h2>
3   <h2 class="test" style="display:none">bbb</h2>
4</body>

css
1.aaa:hover ~ .test {
2  display: block !important;
3}

JSFiddler

投稿2015/09/25 16:24

編集2015/09/25 16:26

touka

総合スコア46

退会済みユーザー

2015/09/25 16:25

なるほど！確かにそれで動きますね。

pro_hiromu

2015/09/29 16:52

回答ありがとうございます！ !importantってどういう意味ですか？ .aaa:hover ~ .test という表記も初めてみましたw

touka

2015/10/08 13:55

ユーザースタイルシートはHTML文書で記述されているスタイルシートより優先順位が低いですから、!importantを使わなければここで設定した値は反映されません。詳しいことは下記のサイトで見てください： http://www.webword.jp/cssguide/priority/

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

それはCSSではなくてJavaScript の出番ですね。

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<h2 id="triggerAAA">aaa</h2>
9		<h2 class="test" style="display:none">bbb</h2>
10		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
11		<script type="text/javascript">
12			$(function () {
13				$("#triggerAAA").hover(
14					function () {
15						$(".test").show();
16					}, function () {
17						$(".test").hide();
18					}
19				);
20			});
21		</script>
22	</body>
23</html>