同じクラス名なのに片方にしかcssの指示が適用されない

同じクラス名なのに片方にしかcssの指示が適用されないです。
クラスdetailsでhoverの指示を出しているのですが、最初のクラスdetailsには適用されません。何故でしょうか。

html
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <title>建設</title>
5    <link rel="stylesheet" href="stylesheet.css" >
6</head>
7<body>
8    <header>
9        <img src="https://danblog.tokyo/img/header_logo.png">
10        <ul>
11            <li>企業理念</li>
12            <li>施工事例</li>
13            <li>採用情報</li>
14            <li>お問い合わせ</li>
15        </ul>
16        <h1>街を作る。未来を作る。</h1>
17    </header>
18    <div class="info">
19        <h2>お知らせ</h2>
20        <div class="info-p">
21            <p>------------------------------------------------</p>
22            <p>------------------------------------------------</p>
23            <p>------------------------------------------------</p>
24        </div>
25        
26    </div>
27    <div class=example>
28        <h2>施工事例</h2>
29        <div class="concrete-example">
30            <div class="saitama concrete">
31                <img class="photo" src="https://danblog.tokyo/img/building1.png">
32                <h3>M様邸新築工事</h3>
33                <p>埼玉県</p>
34                <img class="details" src="https://danblog.tokyo/img/more.png">
35            </div>
36            <div class="tokyo concrete">
37                <img class="photo" src="https://danblog.tokyo/img/building2.png">
38                <h3>スカイビル</h3>
39                <p>東京都</p>
40                <img class="details" src="https://danblog.tokyo/img/more.png">
41            </div>
42        </div>
43    </div>
44    <div class="lists">
45        <a>施工実績一覧</a>
46    </div>
47</body>

css
1*{
2    padding:0;
3    margin:0;
4}
5
6header{
7    background-image: url(https://danblog.tokyo/img/building2.png);
8    height:550px;
9    background-size: cover;
10}
11
12header img{
13    margin-left:180px;
14    margin-top:30px;
15
16    width: 130px;
17}
18
19header ul{
20    float:right;
21    display:flex;
22    margin-top: 50px;
23    margin-right: 90px;;
24}
25
26header li{
27    list-style: none;
28    margin-right: 80px;
29}
30
31header h1{
32    text-align: center;
33    padding-top:200px;
34    font-size:50px;
35    font-family:serif;
36}
37
38header img:hover{
39    cursor: pointer;
40    opacity:0.5;
41}
42
43header li:hover{
44    cursor: pointer;
45    opacity:0.5;
46}
47
48.info{
49    height:350px;
50}
51
52.info h2{
53    font-size: 50px;
54    text-align: center;
55    margin-top: 50px;
56    font-family:serif;
57}
58
59.info-p{
60    margin-top: 40px;
61    text-align: center;
62    width:30%;
63    margin-right:auto;
64    margin-left:auto;
65}
66
67.info-p p{
68    height:50px;
69    border-bottom: black 1px solid;
70    padding-top: 20px;
71}
72
73.example{
74    margin-top: 90px;
75    font-family:serif;
76}
77
78.example h2{
79    text-align: center;
80    margin-bottom: 50px;
81}
82
83.concrete{
84    width: 40%;
85    height:350px;
86}
87
88.concrete-example{
89    display:flex;
90    text-align: center;
91}
92
93.concrete h3{
94    padding-bottom: 10px;
95}
96
97.concrete p{
98    padding-bottom: 10px;
99}
100
101.saitama{
102    margin-left: auto;
103    margin-right: 0%;
104
105}
106
107.tokyo{
108    margin-right: auto;
109    margin-left: 0%;
110}
111
112.photo{
113    width: 70%;
114    height:80%;
115    padding-bottom: 10px;
116}
117
118.details{
119    width: 50%;
120    height:15%;
121}
122
123.details:hover{
124    opacity:0.5;
125    cursor:pointer;
126}
127
128.lists{
129    border:black 1px solid;
130    margin-top: 200px;
131    display: inline-block;
132    font-size: 20px;
133    font-family: serif;
134    margin-left:620px;
135    padding:10px 40px; 
136}
137
138.lists:hover{
139    opacity:0.5;
140    cursor:pointer;
141}

FKM

2021/04/06 04:50

building1.pngとbuilding2.pngは同じ画像サイズ（幅と高さ）ですか？

fukaw

2021/04/06 05:49

同じ画像サイズです

K_3578

2021/04/06 06:43

なんか疑似要素知らないらしいので貼っておきます https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

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

回答2件

ベストアンサー

原因は、display :flexというより、フレックスコンテナ(子要素)やその中のimg要素に無意味な height を設定していることですね。
このため、concrete-exampleクラスのブロックからはみ出して、次の要素の背後に隠れているためにマウスに反応しなくなってます。
また、height を設定しているために、画面幅を狭くすると、画像の幅だけ縮小して縦横比が崩れてしまいます。
height は設定せずに本来の高さになるようにします。(height: auto にしてもよい。)
これでhoverに反応するようになるし、縦横比も維持されます。

下記の /* ここ */ を削除してください。

css
1.concrete{
2    width: 40%;
3    height:350px; /* ここ */
4}
5
6/* 略 */
7
8.photo{
9    width: 70%;
10    height:80%;  /* ここ */
11    padding-bottom: 10px;
12}
13
14.details{
15    width: 50%;
16    height:15%;  /* ここ */
17}

下記の検証ツールの画像で次の要素(div.lists)がdetailsを覆っているが分かると思います。

画面幅を狭くすると、

投稿2021/04/07 05:13

編集2021/04/07 05:39

hatena19

総合スコア33775

fukaw

2021/04/07 06:00

本当にありがとうございます！

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

display :flexが原因なので、擬似クラスを用いた場合はpositionプロパティで位置関係も制御してください。

疑似要素を使ったhover表示のCSSを分解する

css
1.concrete-example{
2    display:flex;
3    position: relative;
4    text-align: center;
5}
6
7.lists:hover{
8    position: absolute;
9    opacity:0.5;
10    cursor:pointer;
11}
12