SVGインライン　hoverできません。

サイトを参考にして作りましたが、
SVGがhoverできません。
なぜか全くわかりません。教えてくださいm(_ _"m)
参考サイト：https://tsuchippo.com/htmlcss-svgcolor

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4      <meta charset="UTF-8">
5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6      <meta http-equiv="X-UA-Compatible" content="ie=edge">
7      <title>svg画像の色を変えるよ</title>
8</head>
9
10
11
12<style>
13  .hamburgerbox {
14        width: 300px;
15        background-color: #ffbc0d;
16        border: 2px solid #ffbc0d;
17        border-radius: 4px;
18        color: #fff;
19        transition: .3s;
20        text-align: center;
21        cursor: pointer;
22  }
23  .hamburgerbox:hover {
24        color: #ffbc0d;
25        background-color: #fff;
26  }
27  svg, object {
28        width: 40%;
29        fill: currentColor;
30  }
31  #hamburger {
32    color: #fff;
33  }
34
35</style>
36
37<body>
38
39<div class="hamburgerbox">
40<!--?xml version="1.0" encoding="utf-8"?-->
41<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
42
43<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1; user-select: auto;" xml:space="preserve">
44<style type="text/css" style="user-select: auto;">
45	.st0{fill:#4B4B4B;}
46</style>
47<g style="user-select: auto;">
48	<path class="st0" d="M495.957,390.227H16.044C7.185,390.227,0,397.401,0,406.249v26.685c0,54.749,114.619,47.804,256,47.804
49		s256-2.185,256-47.804v-26.685C512,397.401,504.815,390.227,495.957,390.227z" ></path>
50	<path class="st0" d="M42.934,353.858h426.13c15.913,0,28.794-12.891,28.794-28.794v-25.272c0-15.891-12.881-28.771-28.794-28.771
51		H430.37l-61.163,61.152c-15.652,15.662-41.033,15.662-56.696,0l-61.152-61.152H42.934c-15.913,0-28.793,12.88-28.793,28.771v25.272
52		C14.141,340.967,27.022,353.858,42.934,353.858z"></path>
53	<path class="st0" d="M256,30.977c-141.38,0-256,74.13-256,172.554v20.739c0,8.848,7.185,16.032,16.044,16.032h479.913
54		c8.858,0,16.043-7.185,16.043-16.032v-20.739C512,105.107,397.38,30.977,256,30.977z M128.706,144.118
55		c-9.38,0-16.967-7.586-16.967-16.967c0-9.37,7.587-16.978,16.967-16.978c9.37,0,16.978,7.609,16.978,16.978
56		C145.684,136.532,138.076,144.118,128.706,144.118z M205.076,93.205c-9.37,0-16.967-7.598-16.967-16.967
57		c0-9.381,7.598-16.967,16.967-16.967c9.38,0,16.978,7.586,16.978,16.967C222.054,85.608,214.456,93.205,205.076,93.205z
58		 M256,161.097c-9.37,0-16.978-7.609-16.978-16.978c0-9.37,7.609-16.967,16.978-16.967c9.37,0,16.978,7.598,16.978,16.967
59		C272.978,153.488,265.369,161.097,256,161.097z M306.924,93.205c-9.38,0-16.978-7.598-16.978-16.967
60		c0-9.381,7.598-16.967,16.978-16.967c9.37,0,16.967,7.586,16.967,16.967C323.891,85.608,316.293,93.205,306.924,93.205z
61		 M383.293,144.118c-9.37,0-16.978-7.586-16.978-16.967c0-9.37,7.609-16.978,16.978-16.978c9.381,0,16.967,7.609,16.967,16.978
62		C400.26,136.532,392.674,144.118,383.293,144.118z"></path>
63</g>
64</svg>
65</div>
66
67
68
69</body>
70
71
72
73</html>

unkochantoboku

2022/04/15 13:42

ありがとうございます。詰めてもう一度確認してみましたが、外側の枠はhover できるのですが中のSVG（hamburger)の色が変わりません。どうすれば変わるのか教えてください。

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

回答1件

ベストアンサー

全角スペースが入っています。

ここだけに限らず、文法チェックしてみてください。

提示の記事に書かれている下記を対応されてないと思います。

＞iconmono の SVG 画像はダウンロードしてきたままの状態だと、ダウンロード時に指定した色が style タグや path タグ内に

style=”fill: rgb(75, 75, 75);”
といった具合に入っているので、それを全て削除します。

あとIDへの指定は優先順位が最も高いのでそちらも削除（もしくはそちらでhover）が必要。
詳細度 - CSS: カスケーディングスタイルシート | MDN

投稿2022/04/15 07:45

総合スコア80850

2022/04/15 13:45

2022/04/15 20:19

中は画像内部なので別問題かと。

m.ts10806

2022/04/15 20:24

回答に書いてますが、文法チェックは済みましたか？（ほかにもあるよという意味ではなく、回答はきちんと読んだのかどうかの確認）

m.ts10806

2022/04/15 20:31 編集

記事に書かれている下記を対応されてないと思います。＞iconmono の SVG 画像はダウンロードしてきたままの状態だと、ダウンロード時に指定した色が style タグや path タグ内に style=”fill: rgb(75, 75, 75);” といった具合に入っているので、それを全て削除します。あとIDへの指定は優先順位高いのでそちらも削除が必要。

unkochantoboku

2022/04/18 06:53

有難うございます。 SVG内のfill color とid の部分を削除し、文法も教えていただいたサイトで確認しました。中のハンバーガーの画像もhoverで色替えしたいのですが、どうしてできないのでしょうか？サイトではできていたので・・・何度もすいません。

m.ts10806

2022/04/18 07:03

詳細度のリンクについては確認されましたか？

unkochantoboku

2022/04/19 01:27

id の部分は削除しました。今、上記のｈｔｍｌは直したものですが、なぜハンバーガーがhoverで色替えできないのか自分ではよくわかりません。

m.ts10806

2022/04/19 01:55

下記がずっと効いています。 <style type="text/css" style="user-select: auto;"> .st0{fill:#4B4B4B;} </style>