img:hoverでimg内に隠れていたテキストを表示させたがテキストにhoverがあたるとimg:hoverが効かない

前提・実現したいこと

※可能であればhtmlを変更せずに（boxを新たに作る等）cssだけを変更して実現させたいです。

①img:hover時にimg中央に隠していたテキストを表示させたが、テキストにhoverがあたるとimg:hoverが効かなくなるので解決したい。
（可能であればhtmlを変更せずに（boxを新たに作る等）cssだけを変更して実現させたいです）

②img:hover時にimgに対してopacityを使って、img全体を黒くマスクがかかったようにし、白色のテキストを目立つようにさせたい。

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

①テキストにhoverがあたるとimg:hoverが効かない。

②黒いマスクではなく、白いマスクがかかっているような印象です。

該当のソースコード

html
1<ul class="menu-list">
2      <li>
3        <img
4          class="menu-img"
5          src="https://source.unsplash.com/random/200x200"
6          alt=""
7        />
8        <span class="menu-name">メニュー名</span>
9      </li>
10
11      <li>
12        <img
13          class="menu-img"
14          src="https://source.unsplash.com/random/200x200"
15          alt=""
16        />
17        <span class="menu-name">メニュー名</span>
18      </li>
19    </ul>

css
1
2.menu-list {
3  display: flex;
4  width: 100%;
5}
6.menu-list li {
7  width: 20%;
8  height: 100%;
9  position: relative;
10  list-style: none;
11}
12
13.menu-img {
14  width: 100%;
15  height: 100%;
16  border-radius: 50%;
17  background-color: #000;
18}
19
20.menu-name {
21  width: 60%;
22  color: #fff;
23  font-weight: 700;
24  text-align: center;
25  position: absolute;
26  top: 50%;
27  left: 50%;
28  transform: translate(-50%, -50%);
29  opacity: 0;
30}
31
32.menu-img:hover {
33  transform: scale(0.9);
34  opacity: 0.7;
35}
36
37.menu-img:hover + .menu-name {
38  opacity: 1;
39}

試したこと

①テキスト(menu-name)に対してopacity: 0;(1)、display:none;(block)、visibility:hidden;(visible)を使用したが、どれを試してもテキストに触れるとimg:hoverが効かなくなってしまう。

②imgのbackground-colorを黒にしてimg:hover時にopacityで透過させたら黒いマスクがかかると想定していたが白のマスクがかかっているような気がします。

行動規範の内容に同意します

回答2件

ベストアンサー

一つ上の要素で:hoverを取ればよいと思います。

CSS
1li:hover .menu-img {
2  transform: scale(0.9);
3  opacity: 0.7;
4}
5
6li:hover .menu-name {
7  opacity: 1;
8}

投稿2020/07/17 14:02

kei344

総合スコア69606

thayamizu

2020/07/17 14:53

ありがとうございます！確かにそれで①は解決しますね！しかし、別の問題としてimgがborder-radiusで丸くなっているので、liに対してhoverを指定するとimgに触れる前から効果が発動するのが気になります。　しかし、li自体を丸くすることで解決できました！ ②に関しては、ご回答頂いた方法でもマスクは黒くなっていないようです。imgにbackground-colorを指定するのが間違っていると思い、liに対してbackground-colorを指定したら、黒いマスクがかかりましたので解決。かと思いましたが、imgのscale(0.9)が発動された際、10%分の黒い背景が見えてしまいます。恐れ入りますが、他に方法はありますでしょうか？今のcssは下記です。 .menu-list { display: flex; width: 100%; } .menu-list li { width: 20%; height: 100%; border-radius: 50%; position: relative; list-style: none; background-color: #000; } .menu-img { width: 100%; height: 100%; border-radius: 50%; } .menu-name { width: 60%; color: #fff; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .menu-list li:hover .menu-img { transform: scale(0.9); opacity: 0.7; } .menu-list li:hover .menu-name { opacity: 1; }