submitボタンの上に重ねた画像にhoverした時opacityが掛からないで書けたいです。

submitボタンの上に画像を重ねて、画像の上にマウスが乗った時に半透明にしたいのですが上手く行きません。
CSSで処理しています。
.testimage {　　　　　//submitボタンのCSS
opacity:0;
position:absolute;
margin-top:72px;
margin-left:125px;
width:110px;　//.testの画像のサイズ
height:65px;　//.testの画像のサイズ
}
.test {　　　　　　//submitボタンに重ねた画像のCSS　　　　
position:absolute;
margin-top:72px;
margin-left:125px;
width:110px;
height:65px;
}
.test:hover {
opacity: 0.5;
}

この様に同一の位置に置いた画像とボタンで表示されている画像の上にマウスが乗った時の透明化が上手く行きません。
submitボタンが上に乗っているので当然なのですが、下の段の画像にまでopacityを掛けたいのですができるでしょうか？

No.2 回答者： ORUKA1951 回答日時： 2015/12/21 14:26

＞submitボタンの上に重ねた画像にhoverした時opacityが掛からない

あたりまえです。
上にものが載っているので下は姿は見えても、触れない。
HTMLの各要素は、レイヤのように次から次に上に重なります。
　ドロー（ベクター）系の画像を書いたことがあればわかるように、それぞれの要素には重ね合わさっていて順番がある。
それはもちろん、z軸方向で指定はできますが、たとえ指定したとしても、上の要素に下は隠れる。

★ フォームのコントロールはスタイルシートやjavascriptでデザインなどを変えるのは極めてまずいことで、変更しないことが強く推奨されています。スタイルシートやjavascriptを利用しない、利用できないユーザーエージェントはたくさんあります。また、ユーザーが操作に戸惑うからです。

　ここはコントロールにbuttonを使用すべきです。
『BUTTON要素が生成するボタンとINPUT要素が生成するボタンは、機能的には同等だが、 BUTTON要素の方がレンダリング能力が高い。 BUTTON要素は内容を持てる。例えば、画像を内容に持つBUTTON要素の機能は、type属性が"image"のINPUT要素とそっくり同じだが、BUTTON要素型は内容を持てるのだ。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

<form action="">
　<buton name="submit" value="送る" type="submit"><img src="/icons/wow.gif" alt="送信する" width="100" hight="50"></button>
</form>

form button[type="submit"] img{
width:110px;height:65px;}
form button[type="submit"]{
border:none;outline:none;
}
form button[type="submit"]:hover{opacity:0.5;}

★ いちいちclassなんてつけないように、class名はあくまで、「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」であって、そんなデザインのためのclassをつけたらだめです。
　また、いきなり.testのように書くのではなく、起点となるセレクタを書きましょう。
5.2 セレクタの構文( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。」

No.1 回答者： fujillin 回答日時： 2015/12/21 10:58

testimageがボタンでtestが画像なのですよね？（逆みたいだけど…）

ボタンを透明（opacity:0)にして代わりに画像を表示したいってことだと思いますが、素直に
　<input type="image"　～～>
を使わない理由が何かあるのでしょうか？
https://developer.mozilla.org/ja/docs/Web/HTML/E …

どうしても重ねて表示したいのなら、ボタンへのhoverの設定は、testimage:hoverになるはず。
その際に画像を半透明にしたいのなら、例えば隣接セレクタで
　.testimage:hover + .test{ opacity: 0.5; }
などとすることでもできると思いますが、必然性がわかりません。
https://developer.mozilla.org/ja/docs/Web/CSS/Ad …