首页 > 代码库 > 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果)
这是一个绿色底白色Icon的搜索按钮
CSS部分:
#top_search { background-color: #24890D; border: 16px solid #24890D; width: 16px; height: 16px; float: right;}
HTML部分:
<div id="top_search"> <img src="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>标签时,悬停效果可以是改变图片的透明度、尺寸。
<style></style>【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。