cssで同時に2つの要素（背景と入れ子の<span>）を透過させたい

以下、サンプル.htmlを元に質問させていただきます。
背景グレーをマウスオーバーすると、<span>もっと見る＞</span>も同時に透過させたいのですが、ieだと実現できません。
画像ではなくテキストで同時にhoverするには、何かいい方法はありますでしょうか。
ie7,ie8も対象にしたいのですが、まずは、ie9以上、Chrome、firefoxが対象です。
できるだけ、cssで再現したくjQueryはcssで再現が厳しい場合に検討をしたいと思っています。
ご教示の程、よろしくお願いいたします。

lang
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4<title>サンプル</title>
5<style type="text/css">
6#nav {
7	margin: 40px auto 0px;
8	width: 620px;
9	overflow: hidden;
10	background: #EEE;
11	color: #000;
12	font-size: 20px;
13	height: 50px;
14	line-height: 50px;
15	position: relative;
16	padding: 0 0 0 20px;
17}
18#nav span {
19	position: absolute;
20	right: 10px;
21	top: 10px;
22	height: 26px;
23	background: #FFF;
24	text-align: center;
25	line-height: 26px;
26	vertical-align: middle;
27	padding: 2px 15px;
28	border: 1px solid #CCC;
29	color: #000;
30	font-size: 14px;
31	display: inline-block;
32}
33#nav a {
34	text-decoration: none !important;
35	color: #000;
36	display: block;
37}
38#nav a:hover {
39	/*background-color: rgba(238, 238, 238, 0.7);*/
40	opacity: 0.5;
41	filter: alpha(opacity=50);        /* ie lt 8 */
42	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
43	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
44	-khtml-opacity: 0.5;              /* Safari 1.x */
45	zoom:1;/* ie */
46	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  /* For IE 5-7 */
47	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* For IE 8 */
48}
49</style>
50</head>
51
52<body>
53<h2 id="nav">
54<a href="ichiran.html">タイトル<span>もっと見る&nbsp; &gt;</span></a>
55</h2>
56</body>
57</html>
58

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

回答2件

ベストアンサー

親要素のhover時に入れ子要素を絡める事も出来ますよ。
IE8以下でも効くはずです。

lang
1a:hover{
2opacity:0.5;
3}
4a:hover > span:hover{
5opacity:0.5;
6}

これで a のhover時に span にも作用します。

参考サイト
http://black-flag.net/css/20110331-2850.html

投稿2015/05/29 17:20

退会済みユーザー

総合スコア0

kapimako

2015/06/01 02:11

このような使い方があるんですね！勉強になりました。ありがとうございます！！！ただ、当方のie8（ie開発ツールのエミュレーションー）ではhoverの透過が再現ができず…？？当方の環境が問題かもしれません。。。

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

旧IEのデバッグ環境を整えていないので実記での確認はできていませんが、
IE11のエミュレーター機能で確認してみたところ、

IE8は動作しないのですが、

lang
1#nav a:hover {

ここを

lang
1#nav:hover {

に変えるといけそうな気がします。

投稿2015/05/29 06:00

Yoh

総合スコア94

kapimako

2015/05/29 06:12

ありがとうございます！！！ie9以上で全体にhoverできました！！後は、ie8以下の時どうするかもう少し調べてみたいと思います。取り急ぎ、御礼申し上げます。ありがとうございました！！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

cssで同時に2つの要素（背景と入れ子の<span>）を透過させたい

関連した質問