IE11とEdgeでaタグに内包された全要素を同時に:hoverで透過させたい。

Question

前提・実現したいこと

IE11とEdgeでaタグに内包された全要素を同時に:hoverで透過させたい。

発生している問題・エラーメッセージ

下記コードにて、chrome・firefoxでは全体を透過することができたのですが
IE11・Edgeでは画像部分のみしか透過されません。
html5で書いておりますので文法に誤りはない・・と思いたいです。
ご教授の程、宜しくお願い致します。

該当のソースコード

<div class="section">
<a href="index.html">
<img src="sample.jpg" width="420" height="241" alt=""/>
<div class="css-box">
<h4>見出し</h4>
<p>テキスト</p>
</div>
</a>
</div>

.section {
    position:relative;
}
.css-box {
	position: absolute;
	width: 240px;
	height: 240px;
	text-align: left;
	padding: 50px 0 50px 25px;
	top: 25px;
	left: 25px;
	box-sizing: border-box;
	background-color: rgba(213, 19, 31, 0.95);
	box-shadow: 0 0 0.769230769vw rgba(0,0,0,0.2);
}
a {
	display: block;
	transition: all 0.2s;
}
a:hover {
	opacity: 0.5;
}

Answer 1

section {
    position:relative;
}
.css-box {
    position: absolute;
    width: 240px;
    height: 240px;
    text-align: left;
    padding: 50px 0 50px 25px;
    top: 25px;
    left: 25px;
    box-sizing: border-box;
    background-color: rgba(213, 19, 31, 0.95);
    box-shadow: 0 0 0.769230769vw rgba(0,0,0,0.2);
}
a {
    display: block;
    transition: all 0.2s;
}
a:hover, a:hover .css-box {
    opacity: 0.5;
}

.css-box が絶対配置になっているので、そこの部分も個別に指定するとよいです。

Comments

[CoffeeMegane]

ご回答ありがとうございます。
申し訳ございません！
貼り付け時に案件が分かるようなクラス名でしたので整形した際にミスをしてしまったようです・・
ご指摘の件、実際にはその通りになっております。
つたない質問にお時間を割いて頂きありがとうございました。

[Takamoso]

a:hoverもスペース空けてない感じですか？

[CoffeeMegane]

はい、その通りでございます。
確認した限りchromeとfirefoxではaタグに内包している画像とボックスは全体が透過し、
IE11とEdgeでは画像のみが透過する為、試行錯誤してみましたがお手上げ状態で現在に
至ります・・

結果全体がリンクとなり、透過すれば良いので違うアプローチ等あればご教授頂けたらと
思い質問させて頂きました。

[CoffeeMegane]

ご回答が更新されているのに気が付きませんでした！
ありがとうございます！！！
全体透過ができました！

本当にありがとうございます！！

Answer 2

IE用にベンダープレフィックスを追加してみてください。

css-box {
    position: absolute;
    width: 240px;
    height: 240px;
    text-align: left;
    padding: 50px 0 50px 25px;
    top: 25px;
    left: 25px;
    box-sizing: border-box;
    background-color: rgba(213, 19, 31, 0.95);
    box-shadow: 0 0 0.769230769vw rgba(0,0,0,0.2);
    -ms-box-shadow: 0 0 0.769230769vw rgba(0,0,0,0.2); ← 追加
}
a {
    display: block;
    transition: all 0.2s;
    -ms-transition: all 0.2s; ← 追加
}

Comments

[CoffeeMegane]

ご回答ありがとうございます。
試してみましたが状況変わらずでした・・。