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

您可以使用 :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>

div.ex通过采用相同的 css 类并添加来创建悬停元素:hover