以下の様な表示を目指しHTML/CSSを書きましたが、幾つか分からない点がある為質問いたします。

作りたいもの

ある画像に対してカーソルを合わせるとその画像が非表示になり裏にある背景の画像が見える

質問

実際にカーソルを当てると非表示になり背景画像が現れるがカーソルを画像上で動かしていると非常にチカチカする。
.buttonのheight: 250pxを入れないと背景画像が表示されなくなる。

2はheight: autoにしてもダメでした。

コード

back_image.png と back_forcus_image.pngは共に250*250 pixelです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>テストサイト</title>
5    <link href="sample.css" rel="stylesheet" type="text/css">
6  </head>
7
8  <body>
9    <div id="container">
10      <div class="button">
11        <img src="back_image.png">
12      </div>
13    </div>
14  </body>
15  
16</html>

css
1body {
2  margin: 0px;
3  padding: 0px;
4  width: 100%;
5  height: 100%;
6}
7
8#container {
9  margin: 0px auto 0px auto;
10  width: 250px;
11  height: auto;
12  background-color: brown;
13}
14
15.button
16{
17  height: 250px;
18  background-image: url(back_forcus_image.png);
19  background-repeat: no-repeat;
20  display: grid;
21}
22
23.button img:hover
24{
25  display:none;
26}

環境

GoogleChrome 使用

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

回答1件

ベストアンサー

.button img:hover->.button:hover img

投稿2022/04/09 16:21

kei344

総合スコア69625

mushipan0929

2022/04/10 01:23

ありがとうございます！ちらつく事無く隠す事が出来ました。問題を理解しておきたい為確認なのですが .button img:hoverだとimgにカーソルを乗せないと発火しない → display:noneによってimgの判定が消える → .button:hover imgの条件を満たせずimgが表示される → カーソルは乗り続けているので即、:hoverを満たしまた消える...の繰り返し → 結果チラつくという状態で合っていますでしょうか？