按钮点击效果(点击变颜色不点恢复颜色)模拟hover效果

在点击的过程中按钮变颜色,可以方便看到是否触发了按钮的点击事件

function changeColor(id,class1,class2) {
            $("#instbtn").on("touchstart",function () {
                $(this).attr("class",class1)
            })
            $("#instbtn").on("touchend",function () {
                $(this).attr("class",class2)
            })
        }
        changeColor("instbtn","interest-btn2","interest-btn")
<button class="interest-btn" id="instbtn">点击</button>

 

 

 

要实现hover点击颜色的功能,可以使用MouseRegion和AnimatedContainer组件来实现。以下是示例代码,可以将红色的三角形按钮hover点击成黄色: ```dart class TriangleButton extends StatefulWidget { @override _TriangleButtonState createState() => _TriangleButtonState(); } class _TriangleButtonState extends State<TriangleButton> { bool _isHovering = false; bool _isPressed = false; @override Widget build(BuildContext context) { return MouseRegion( onEnter: (event) { setState(() { _isHovering = true; }); }, onExit: (event) { setState(() { _isHovering = false; }); }, child: GestureDetector( onTapDown: (details) { setState(() { _isPressed = true; }); }, onTapUp: (details) { setState(() { _isPressed = false; }); }, onTapCancel: () { setState(() { _isPressed = false; }); }, child: AnimatedContainer( duration: Duration(milliseconds: 200), width: 0, height: 0, decoration: BoxDecoration( border: Border( left: BorderSide(width: 20.0, color: Colors.transparent), right: BorderSide(width: 20.0, color: Colors.transparent), top: BorderSide(width: 20.0, color: _isPressed ? Colors.yellow : (_isHovering ? Colors.yellow : Colors.red)), ), ), ), ), ); } } ``` 在这个示例代码中,使用MouseRegion组件来监听鼠标进入和离开事件,使用GestureDetector组件来监听按钮点击事件。在按钮点击hover状态发生,通过AnimatedContainer组件的动画效果来实现颜色化。 你可以根据需要自定义按钮颜色和样式来创建不同形状和样式的三角形按钮
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值