【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

:hover所有主流浏览器都支持(IE6.0以下支持不好，以后再学习用Javascript来实现悬停效果)

这是一个绿色底白色Icon的搜索按钮

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAwCAIAAAAzV9XTAAACVUlEQVRYhe3VTWsTQRgH8HyBTetLv8EmMRZsUTwYGg+2igcJHkTxIKUirXrSg0Xw1Fs3bQgUE3G7ShRs+m5p06J4kB6EUEoTa+tLUaKxtWmaZlPNi2l25u9hYZEUPQS7qzjwHGbYZfjN88wzYzKZTLzA/VUBAICJyZiMyYymMBmTMRmTMdm/J2sU66SZno/pDwpVCCVxORaY9Z+QDhkmswhmXuCuT1xcznxSV8kU5ExBVsdfvn5un2wzLGfXxltKZAvA06XxK6Pnm8T6RrGudeTs1NtRAApV2icva3vQT3bs7oHlzTiA2y86bV27fv5kdVd5pjsArGfX1LJWgKtcJs30AHi2FLK5q3mBs7mrLYLZIpjVKS9woTfDAMSwV+9qxtLvKWjbyDmVVZYzXuCaB1wUdH51rtZTo6tMIaXN75kmsf5XPxy9Y88U0uvZtSM+i96yTEH+jczpt8v5jVQu6fBZdZXF5RgFvTR8RitfWTUv9J+ioIuJqN7VDMz6ATx5N6ZOtQ7QlGML/cZ0wPHeg4lvKwA80x3bL4XO57cIJbli1hVo4Le1yM7KeIG7EWpVqAJg4vVQy+Bpp9/u9NubB1yPF4LqTbulFPsi0r6u3brmTI2bU1eT2YS6ipzfSOdT6jhXzFJQQgmAYOReBUftD7zoJ6XDYtj7ajWSyiVTueRiIiqGva5Aw6O5XgAKKQEYfPlAb5l2wmo9NQ6f1eGzaumxd+/pi0gACCWEEgNyZnVXlXWA9kbt7947NP9QIaVg9L4Bsh0KJmMyJmMyJmMyJmOy/1n2Axoad7OoKvmbAAAAAElFTkSuQmCC" alt="" />

CSS部分：

#top_search {
    background-color: #24890D;
    border: 16px solid #24890D;
    width: 16px;
    height: 16px;
    float: right;
}

HTML部分：

<div id="top_search"> <img src="data:images/search.png"/ width="16px" height="16px"> </div>

要实现的悬停效果：绿色背景增加4px宽度，同时绿色背景变浅。这里用到:hover。

div#top_search:hover {
    border:16px solid #2A9E0F;  /*边框颜色*/
    background-color:#2A9E0F;  /*DiV背景颜色*/
    width: 20px;
}

鼠标放到右边可以看到最终效果

同理，这个方法可以应用于<a>标签、<img>标签等。:hover 选择器几乎可用于所有元素。应用于<a>标签时，悬停效果可以是改变字体颜色；应用于<img>标签时，悬停效果可以是改变图片的透明度、尺寸。