如何在非<a>标签的DataGrid行hover时显示左下角URL提示？

当然可以实现，下面给你两种实用的方法：

方法一：利用原生DOM的title属性（简单快速） #

直接给每个.data-row元素添加title属性，值设为目标URL。虽然默认的浏览器提示是鼠标旁的气泡，不是左下角地址栏样式，但如果只是要展示URL，这是最省事的方案：

// 假设每行的目标URL存在data-url属性中
document.querySelectorAll('.data-row').forEach(row => {
  const targetUrl = row.dataset.url;
  row.setAttribute('title', targetUrl);
});

方法二：模拟浏览器地址栏预览（贴近真实链接体验） #

浏览器左下角的URL预览是<a>标签独有的原生行为，要复刻这个效果，可以借助隐藏的锚点元素配合事件监听：

1. 先在页面中添加一个隐藏的锚点：

<a id="hidden-link" style="position: fixed; visibility: hidden;"></a>

2. 给.data-row绑定鼠标事件，动态修改隐藏锚点的href：

const hiddenLink = document.getElementById('hidden-link');
const rows = document.querySelectorAll('.data-row');

rows.forEach(row => {
  // 鼠标悬停时设置隐藏链接的地址并触发聚焦
  row.addEventListener('mouseenter', () => {
    const targetUrl = row.dataset.url;
    hiddenLink.href = targetUrl;
    hiddenLink.focus();
  });

  // 鼠标离开时清空地址
  row.addEventListener('mouseleave', () => {
    hiddenLink.href = '';
  });

  // 点击行执行跳转
  row.addEventListener('click', () => {
    window.location.href = row.dataset.url;
  });
});

这样鼠标悬停在.data-row上时，浏览器左下角就会像真实链接一样显示目标URL了，记得提前给每行的data-url属性设置好跳转地址。

内容的提问来源于stack exchange，提问作者Jason Ayer