Q&A
普通に、親要素にonmouseoverをつければいいような気がするのですが、それではダメでしたか？
前提・実現したいこと
お世話になっております。
重なっている要素も1つの要素として扱いたいです。
今のコードだと文字の部分をホバーすると周りが元の画像に切り替わってしまいます。
それをどうにかしたく、文字を周りと同じ要素と認識してくれたりすれば良いと思ったのですが、やり方が分かりません。
思い浮かんだのが1つの要素として扱うことだったので、他に方法があれば、別の方法で構いません。
因みに画像のデザインはダミーです。
発生している問題・エラーメッセージ
ホバー時に望んでる結果にならない。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <meta content="text/css" http-equiv="Content-Style-Type"> 7 <link href="css/実験.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11 12 13 14<ul id="nav"> 15 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU1</span></a></li> 16 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU2</span></a></li> 17 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU3</span></a></li> 18 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU4</span></a></li> 19 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU5</span></a></li> 20 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU6</span></a></li> 21 <li><a href="#"><img src="img/navi/navi_off.png" onmouseover="this.src='img/navi/navi_on.png'" onmouseout="this.src='img/navi/navi_off.png'"><span>MENU7</span></a></li> 22</ul> 23 24</body> 25 26</html>
css
1#nav { 2 list-style: none; 3} 4 5#nav li { 6 width: 120px; 7 height:47px; 8 text-align: center; 9 display: inline-block; 10 margin:0 10px 0 0; 11} 12 13#nav li img{ 14 width: 120px; 15} 16 17#nav li a { 18 text-decoration: none; 19 color: #1F2B60; 20 font-weight: bold; 21} 22 23#nav li a:hover { 24 text-decoration: none; 25 color: #FFF; 26 font-weight: bold; 27} 28#nav li a span{ 29 position:relative; 30 top:-40px; 31}
試したこと
インターネットでの検索
z-indexの使用（当たり前ですが文字が消えたのでだめでした。）
補足情報（FW/ツールのバージョンなど）
前提として文字も打ち込んだ画像にしたら駄目なのかと思うと思いますが、項目が増えた際に画像を編集しなければならないので少し面倒なのでこの方式でやろうとしました。
さらに言うなら大前提として画像じゃなくてデザインをコードで再現出来れば何も悩まなくて良いのは分かってます。
分かってはいるのですが・・・再現能力が・・・
大変申し訳ないのですが、ご助言頂けたら幸いです。
navi_on
navi_off
追記：このコードだと変なところにリンクが出来てしまってますね。
その修正は別問題だと思うので一先ず無視して頂けると幸いです。
回答2件
0
背景画像としてCSSで指定すれば良いのでは？
投稿2019/08/02 07:26
総合スコア80854
ご回答ありがとうございます。
それは考えたのですが、それをするとボタンが増えた際にボタンの大きさが変わると表示が変になる（途中で切れる）ので結果的やっぱり画像編集の手間が出来るんですよ。
背景に設定しながら大きさ変えた際に画像もそれに合わせて縮んでくれると解決するのですが・・・
>それをするとボタンが増えた際にボタンの大きさが変わると表示が変になる
ちょっとこれは状況が分かりません。
同じようにリストで使っていて同じ画像であれば
ボタンの大きさが変わる
→ボタン画像も作り直す
→CSSの指定も変更する
ことになるのはどのようにしても同じではないでしょうか。
説明不足でした、すみません。
仮に上記の提示してる方法でした場合cssのimgを一緒に変更すれば縦横の比率等はズレますが、画像全てを表示するのに対し、背景だと画像自体が途中までしか表示されなくなってしまいますので、そういった意味での発言でした。
>背景だと画像自体が途中までしか表示されなくなってしまいますので
そのために#nav liにwidth,heightを指定していると思ってたのですが、そうではないのでしょうか？
私の手元の方では「途中までしか表示されない」現象が起きていませんので、ちょっと何を懸念されているか分かりかねている状態です
なんか根本的に自分が勘違いしてそうな気がしてきました。
あんまりこっちに記載は推奨されてませんが・・・
背景にするって事は下記みたいにするって事ですよね？
（余計なHTMLの記載は消した上で）
#nav {
list-style: none;
}
#nav li {
width: 138px;
height:47px;
text-align: center;
display: inline-block;
margin:0 10px 0 0;
}
#nav li a {
text-decoration: none;
color: #1F2B60;
font-weight: bold;
background:url(../img/navi/navi_off.png);
display:block;
width:138px;
height:47px;
}
#nav li a:hover {
text-decoration: none;
color: #FFF;
font-weight: bold;
background:url(../img/navi/navi_on.png);
}
この場合#nav li aのwidthをイジると画像途中で切れてしまいますよね？
liに背景画像を入れれば切れることなく表示されます。
なるほど。
仰っている事がやっと分かりました。
すみません、理解力及び知識不足で確かにどの道これだと編集が要りますね。
何度もご説明にお時間を頂く形になってしまい申し訳ありませんでした。
いえいえ、どこかで役に立つと良いなと思ってます。
0
ベストアンサー
こんな感じはどうでしょう？ JavaScript消してしまいましたが……
サンプル
html
1<ul id="nav"> 2 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU1</span></a></li> 3 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU2</span></a></li> 4 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU3</span></a></li> 5 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU4</span></a></li> 6 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU5</span></a></li> 7 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU6</span></a></li> 8 <li><a href="#"><img src="img/navi/navi_off.png"><img src="img/navi/navi_on.png"><span>MENU7</span></a></li> 9</ul>
css
1#nav li a img + img{ 2 display: none; 3} 4#nav li a:hover img{ 5 display: none; 6} 7#nav li a:hover img + img{ 8 display: unset; 9}
投稿2019/08/02 08:52
総合スコア36142
unset も initial も IE11が対応していないので、実際のとこ、inline が無難なのかもしれません。
ご回答ありがとうございます。
おかげで無事できました。
後は変なリンクを正すだけですなので、頑張ります。
あなたの回答
tips
プレビュー
