如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊

我会带着你远行 2022-06-09 09:07 82阅读 0赞

我这里主要使用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 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 AnyChart背景变透明

var chart1 = anychart.tagCloud(datas); // chart1.textSpacing(15); var back...

骑猪看日落/ 2024年04月18日 21:47/ 0 赞/ 70 阅读

相关 ChatGPT 如何让测试变得更好？

![在这里插入图片描述][0fa85795a3494b069b344e8d52af7908.png] 基于AI的新型语言系统ChatGPT成为全网热议的话题。它在 2022

柔光的暖阳◎/ 2023年10月09日 19:19/ 0 赞/ 62 阅读

相关 Gimp 让背景变得透明

第一步：选择要变透明的区域。第二步：在菜单中选择： Layer – Transparency – Add Alpha Channel 第三步：清除：

忘是亡心i/ 2023年06月30日 01:44/ 0 赞/ 1 阅读

相关如何让编程水平变得更高

编程水平如何快速变高你是否从前羡慕过那些大佬，那些人，什么都可以给你整出来。你是否嫉妒过那些刷题王，那些人，手一挥代码就好。而你做题，大脑一片空白，没

爱被打了一巴掌/ 2023年01月07日 07:20/ 0 赞/ 171 阅读

相关 echarts 饼图悬浮背景透明

实现： > 1、可通过`echat.dispatchAction`默认悬浮展示浮层 > > 2、可调节`radius`进行文案居中展示效果如下图所示： ![image

末蓝、/ 2022年11月27日 10:11/ 0 赞/ 620 阅读

相关利用css实现背景半透明，文字不透明。

利用css3新增的rgba属性，在新增filter属性兼容ie6、7、8浏览器 .div{ color:white; background-color:rgba(0,

港控/mmm°/ 2022年06月16日 06:24/ 0 赞/ 295 阅读

相关如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊

我这里主要使用Javascript实现的。这个效果大体是这样的，当我们的鼠标悬浮在按钮上，背景的半透明变得更浅或更深，鼠标移开后就回复原样。所以我们要用到两个鼠标事件on

我会带着你远行/ 2022年06月09日 09:07/ 0 赞/ 83 阅读

相关 GPU编程 | 如何使得CUDA编写的GPU程序变得更高效？

在上一篇文章[《那么CUDA是如何进行并行编程的？》][CUDA]中，为了让GPU的并行计算更加高效，本篇文章从高效的内存策略和屏障和同步机制下的编程规则这两个角度来建议CUD

た入场券/ 2022年02月28日 04:10/ 0 赞/ 241 阅读

相关 GMQ Wallet现代生活变得更简单、更便捷

经济在发展，时代在前进。从凭票购物到移动支付，支付方式的变迁折射出百姓生活的变化、金融科技的进步以及我们祖国在现代化建设中所取得的辉煌成就。面对席卷而来的金融科技浪潮，我们只有

古城微笑少年丶/ 2022年01月20日 04:45/ 0 赞/ 322 阅读

相关 Dataway让 Spring Boot 变得更强大！

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达作者：哈库纳来源：my.oschina.net/ta8210/blog/3234639 D

灰太狼/ 2021年08月29日 19:16/ 0 赞/ 601 阅读