悬停时的背景颜色变化

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

您可以使用：hover选择器：

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

但是如果您使用的是图像，则可以应用CSS Image Sprites：

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

顺便说一下，如果你正在开发一个网站，也许CSS Image Sprites可以提升网站的性能（因为它只使用1个原生图像进行多个图像交互）。

）

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>

通过使用相同的css类div.ex并添加:hover

来创建悬停元素