如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊
来源:互联网 发布:星尘数据 编辑:程序博客网 时间:2024/06/05 18:12
我这里主要使用Javascript实现的。
这个效果大体是这样的,当我们的鼠标悬浮在按钮上,背景的半透明变得更浅或更深,鼠标移开后就回复原样。所以我们要用到两个鼠标事件onmouseover和onmouseout。
onmouseover鼠标悬浮事件,onmouseout鼠标移开事件,很显然当我们的鼠标移入和移出时我们都要修改背景的opacity属性,那么我们可以在一个函数中对背景opacity进行修改:
//点击按钮的鼠标悬浮事件function mouseHoverEvent(){ var img_btns = document.getElementsByClassName("img_btns")[0]; var a_btns = img_btns.getElementsByTagName("a"); for(var i = 0; i < a_btns.length; i++){ a_btns[i].setAttribute("onmouseover","mouseEvent("+i+",true)"); a_btns[i].setAttribute("onmouseout","mouseEvent("+i+",false)"); a_btns[i].setAttribute("onclick","imgBtnClickEvent(this)"); }}//点击按钮底部span的鼠标悬浮事件function mouseEvent(index,flag){ //通过true或false判断是鼠标移入还是移出事件 if(flag){ span_btn_bgs[index].style.filter = "alpha(opacity=20)"; span_btn_bgs[index].style.opacity= "0.2"; }else{ span_btn_bgs[index].style.filter = "alpha(opacity=50)"; span_btn_bgs[index].style.opacity= "0.5"; }}
阅读全文
0 0
- 如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊
- Android中如何使按钮的背景变得透明
- 如何实现鼠标悬浮放大
- 悬浮按钮的实现
- 鼠标悬浮在button按钮上时的事件
- 如何变得更聪明?
- 如何实现鼠标悬浮上去后放大
- CSS让网页里的提交按钮变得更漂亮
- css实现鼠标悬浮字体流光背景模糊效果
- 如何实现按钮底部半透明,但是不影响按钮的字体正常显示
- WZSZF飞鸽传书 如何实现网页悬浮按钮
- WPF实现半透明背景的弹框
- WPF实现半透明背景的弹框
- 如何让背景半透明
- popupWindow 实现悬浮半透明效果
- QListView的item去掉选中时的虚线、更改鼠标悬浮与选中时背景样式
- Android 实现背景半透明
- 半透明AlphaBlend 实现界面或某块资源的半透明
- 游戏人工智能编程案例精粹pdf
- 淘宝MySQL十大经典案例pdf
- Android O 趟过的那些坑
- 游戏设计的236个技巧pdf
- Visual FoxPro权威指南pdf
- 如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊
- Oracle.DBA手记·4:数据安全警示录pdf
- SQLite权威指南(第二版)pdf
- SQLServer2008应用实践教程pdf
- SQL入门经典(第5版)pdf
- XML入门经典(第4版)pdf
- 高性能MySQL(第2版)中文版pdf
- Leetcode-House Robber-Python
- 成功之路:ORACLE11g学习笔记pdf