html - ホバー時の背景色の変更

Question

テキストの周りにボックスを作成しました。
今、ホバーしてボックスの背景の色を変更したいと思います。マウスホバー時にそれを変更することはできません。これに画像も添付
しましたので、アイデアを得ることができます。テキストの周りにボックスを作成しました。今、ホバーしてボックスの背景の色を変更したいと思います。マウスホバー時にそれを変更することはできません。これに画像も添付しましたので、画像を確認してソーシャルメディアボックスを見つけてください。マウスをホバーすると
、ホバーの色が変わりません。

 <style>
 div.ex
 {
     width:20px;
     height:20px; 
     padding:5px;
     border:1px solid #D8D8D8;
     margin:0px;
     background-color:#3b5998;
 }
 </style>


<div class="ex"><span class="iconfacebook2" aria-hidden="true" data-icon="&#xe169;">     
</span></div> 

※画像が見えるように加工しています

Answer 1

<style>
div.ex
{
width:20px;
height:20px; 
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
div.ex:hover {
background-color:#000;
}
 </style>

同じcssクラスを取得してdiv.ex追加することにより、ホバー要素を作成します:hover