jQuery鼠标经过高亮显示当前行
封面图
•
2025-12-02
•
jQuery
211
0
0
0
在 jQuery 中,可以通过 `mouseenter` 和 `mouseleave` 事件来实现“鼠标经过高亮显示当前行”的效果。下面是一个简单的示例,展示如何为表格中的每一行添加高亮效果。 --- ### ✅ 示例:表格行高亮 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery 鼠标高亮行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> table { width: 100%; border-collapse: collapse; } tr { cursor: pointer; } tr:hover { background-color: #f0f0f0; } .highlight { background-color: yellow; } </style> </head> <body> <table border="1"> <tr><td>行 1</td></tr> <tr><td>行 2</td></tr> <tr><td>行 3</td></tr> <tr><td>行 4</td></tr> </table> <script> $(document).ready(function () { $('tr').on('mouseenter', function () { $(this).addClass('highlight'); }).on('mouseleave', function () { $(this).removeClass('highlight'); }); }); </script> </body> </html> ``` --- ### 🔍 说明: - 使用 `mouseenter` 和 `mouseleave` 事件来控制高亮。 - `.highlight` 是一个 CSS 类,用于设置高亮样式(如背景色)。 - 也可以直接使用 CSS 的 `:hover` 伪类实现类似效果,但 jQuery 可以更灵活地处理动态内容或复杂逻辑。 --- ### 🔄 如果你想要点击后保持高亮: 可以加上点击事件,让某一行被点击后保持高亮状态: ```javascript $('tr').on('click', function () { $('tr').removeClass('highlight'); // 移除所有高亮 $(this).addClass('highlight'); // 当前行高亮 }); ``` --- 如果你有特定的 HTML 结构或者需要更复杂的交互,请告诉我,我可以提供更定制化的代码。
上一篇:
Integrated Peripherals(外部设备设定)
下一篇:
asp常用内部函数收藏
标题录入,一次不能超过6条
留言
评论