我们对于鼠标经过图标切换效果这个神奇效果并不陌生,那么怎么用代码实现呢?
html:
鼠标经过图标切换效果
图片:
注意:
1、超链接是行内元素,不能直接定义宽度和高度,所以需要使用display:block;将其转换为块元素。
2、背景图像默认相对于盒子的左上角对齐。当鼠标经过时,需要将背景图像相对于盒子的底部对齐,即使用
background-position:bottom;。
效果:
鼠标经过前
鼠标经过时
我们对于鼠标经过图标切换效果这个神奇效果并不陌生,那么怎么用代码实现呢?
html:
鼠标经过图标切换效果
图片:
注意:
1、超链接是行内元素,不能直接定义宽度和高度,所以需要使用display:block;将其转换为块元素。
2、背景图像默认相对于盒子的左上角对齐。当鼠标经过时,需要将背景图像相对于盒子的底部对齐,即使用
background-position:bottom;。
效果:
鼠标经过前
鼠标经过时