按钮固定在屏幕右下角,通过hover控制div的展示和隐藏

通过hover来控制一个div的展示和隐藏
<style>
	.float_tips_area {
   
    position:absolute;
    background-color: #ffffff;
    border-radius: 5px;
    display:none;
    right:20px;
    width:70%;
    z-index: 1000;
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 jQuery 来实现这个功能。具体实现方法如下: 1. 给工时表格中的每个单元格添加一个 class 名称,例如 `hour-cell`。 2. 给每个单元格添加一个鼠标移入事件(`mouseenter`),在事件中显示复核按钮。 3. 给每个按钮添加一个点击事件(`click`),在事件中找到对应单元格并添加“已复核”字样。 下面是示例代码: ``` <table> <tr> <th>日期</th> <th>工时</th> <th>操作</th> </tr> <tr> <td>1月1日</td> <td class="hour-cell">8</td> <td class="operation-cell"></td> </tr> <tr> <td>1月2日</td> <td class="hour-cell">7</td> <td class="operation-cell"></td> </tr> <!-- 其他行省略 --> </table> <style> .operation-cell { position: relative; } .check-btn { display: none; position: absolute; right: 0; bottom: 0; } .hour-cell:hover .check-btn { display: block; } </style> <script> // 鼠标移入单元格时显示复核按钮 $('.hour-cell').mouseenter(function () { var $operationCell = $(this).siblings('.operation-cell'); $operationCell.html('<button class="check-btn">复核</button>'); }); // 点击按钮后添加“已复核”字样 $('.operation-cell').on('click', '.check-btn', function () { $(this).parent().prev('.hour-cell').append('<div>已复核</div>'); }); </script> ``` 在上面的代码中,我们给每个工时单元格添加了一个 `hour-cell` 的 class 名称,用于方便后续查找。在 CSS 中,我们为操作单元格(即复核按钮所在单元格)设置了 `position: relative;` 属性,为复核按钮设置了 `display: none;` 属性,用于初始状态下隐藏按钮。 在 JS 中,我们为每个工时单元格添加了一个鼠标移入事件,当鼠标移入时,会在对应操作单元格中添加一个复核按钮。然后,我们为每个复核按钮添加了一个点击事件,当点击时,会找到对应工时单元格,并在其右下角添加“已复核”字样。 需要注意的是,在 JS 中,我们使用了 `on()` 方法来绑定点击事件,这是因为按钮是动态生成的,如果使用 `click()` 方法来绑定事件,则可能会出现事件无法响应的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值