Background color change on hover

Question

I have done box around text. Now I want to be hover and change the color of the box
background. I am not able to change that when mouse hover. I have also attached the
image with this so you can have idea about. I have done box around text. Now I want to be hover and change the color of the box background. I am not able to change that when mouse hover. I have also attached the image with this so you can have idea about.please check the image and found the social media box , when I hover the mouse
the hover color is not changing.

 <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> 

*edited to make the image appear

Answer 1

You can use the :hover selector:

http://www.w3schools.com/cssref/sel_hover.asp

But if you are using images, you can apply CSS Image Sprites:

http://www.w3schools.com/css/css_image_sprites.asp

By the way, if you are developing a website, maybe CSS Image Sprites are a good choice to boost the performance of the website (because it uses only 1 native image for multiple image interactions).

;)

Answer 2

<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>

Create a hover element by taking the same css class div.ex and adding :hover