Aという画像の上にBというリボンをcssを使って、Position:absolute;で表示させています。


Aという画像をマウスオーバーすると半透明になるcssを適用すると

Bのリボンまで一緒に半透明になってしまいます。

BのリボンはAの画像から少しはみ出させているのですが、はみ出している部分は透明にはなりません。

できれば、Aの画像のみマウスオーバーすると半透明になるようにしたいのですが、いい方法はありますか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/03/13 15:48:11
  • 終了:2013/03/15 11:43:32

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/03/14 20:44:37

ポイント100pt

HTMLのコードを記述している順番としては、Bの画像表示の後にAの画像表示、またはB、Aの順番で各要素に背景画像を指定しているのでしょうか?
この場合、上に重ねる画像を「absolute」で配置していると思いますが、この要素に対して「z-index:5;」を指定してみてください。

※例えばHTMLが次のようになっている場合、

・画像をimgで表示

<div class="ribbon-box">
	<img class="ribbon-a" src="上に重ねる画像のパス">
	<img class="ribbon-b" src="下に表示する画像のパス">
</div>

CSSは次のように指定します。

<style type="text/css">
	.ribbon-box {
		position: relative;
	}
	.ribbon-b:hover {
		opacity: 0.4;
		filter: alpha(Opacity=40);
	}
	.ribbon-a{
		position: absolute;
		left: 45px;
		top: 70px;
		z-index: 5;
	}
</style>

・各要素の背景画像として表示

<div class="msg-box">
	<div class="img-a"><span>Ribbon-A</span></div>
	<div class="img-b"><span>Ribbon-B</span></div>
</div>


CSSは次のように指定します。

<style type="text/css">
	.msg-box {
		position: relative;
		width: 400px;
	}
	.img-a {
		position: absolute;
		background: url(上に表示する画像のパス) 0px 5px no-repeat;
		width: 110px;
		height: 110px;
		left: 40px;
		top: 70px;
		z-index:5;
	}
	.img-a span {
		visibility: hidden;
	}

	.img-b:hover {
		opacity: 0.4;
		filter: alpha(Opacity=40);
	}
	.img-b {
		background: url(下に表示する画像のパス) 0 0 no-repeat;
		width: 110px;
		height: 110px;
	}
	.img-b span {
		visibility: hidden;
	}
</style>

(※反映されない場合は、さらに大きな数値を指定して試してください。)

http://www.htmq.com/style/z-index.shtml

※あるいは順番に記述すると大丈夫なので、Aの画像の後にBの画像を表示、またはA、Bの順番で要素に背景画像を指定しても大丈夫です。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません