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を掛けたいのですができるでしょうか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>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
- 回答日時:
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 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
PNGがうまく表示されない・・・。
-
<hr>の縦バージョンはありますか?
-
HTMLです 店主のこだわりという...
-
背景画像をリピートさせない方...
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
画像の上にテキスト配置で、拡...
-
CSSで背景画像をランダムに表示...
-
背景画像がずれる現象について
-
webページ作っているのですが、...
-
background-sizeの背景で最小値...
-
コーディング中、右側に謎の余...
-
背景を固定し文章だけをスクロール
-
ボタン(画像)をクリックする...
-
スクロールバー
-
背景部分を透けさせてデスクト...
-
画像で背景透明のテキストがに...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報