【学习笔记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>标签时,悬停效果可以是改变图片的透明度、尺寸。

转载于:https://www.cnblogs.com/zhaofl/p/4202604.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值