前提・実現したいこと
WEBサイトを作っているのですが、ホバーが上手くいきません。
<div class="about">の中に<a>で文字をいれたボタンを作っていていて、:hoverで<div class="about">のbackground-colorを変わるようにしたいです。ですが今は<a>の部分だけ色が変わってしまいます。 ![イメージ説明](56bfb4db100fe7c60f335827bbc2d800.png)発生している問題・エラーメッセージ
- <a>artwork</a>に:hoverが効いてしまっている。 - <div class="about">に:hoverが効かない。
該当のソースコード
html
1 <div class="menu"> 2 <div class="about"> 3 <a>artwork</a> 4 </div> 5 </div>
css
1.menu { 2 height: 150px; 3 width: 100%; 4 margin: auto; 5 margin-top: 70px; 6 text-align: center; 7 } 8 9 a { 10 display: inline-block; 11 margin-top: 40px; 12 } 13 14 .artwork { 15 text-align: center; 16 display: inline-block; 17 18 height: 150px; 19 width: 150px; 20 border-radius: 50%; 21 margin: 0 30px; 22 23 box-shadow: 10px 9px 14px rgba(163, 177, 188, 0.6), 24 -10px -10px 14px rgba(255, 255, 255, 0.5), 25 inset 0 0 7px rgba(146, 175, 171, 0.3), 26 inset -3px -3px 7px #FFFFFF; 27 background-color: #E7E9EA; 28 } 29 30 31 .artwork :hover { 32 33 background-color: #CDF915; 34 transition: background-color 800ms; 35 } 36 37 .artwork a { 38 padding-top: 20px; 39 text-align: center; 40 } 41 42 43
試したこと
.artwork div :hover{ } div.artwork :hover{ } ```のようにdivだけに効くような指定をしてみましたが変わらずaに効いてしまいます。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/14 02:54