Как создать такое же поведение при наведении указателя мыши на теге <a>на других тегах?

Question

При наведении указателя мыши на тег <a> в chrome браузер считывает 'href' и отображает ссылку в левом нижнем углу. Могу ли я подражать этому поведению c без использования тега <a>?

. Например, в этой ситуации тег <a> делает текст кликабельным только в каждой строке, и вам придется сделать несколько хакерских css, чтобы попытаться приблизить его к полному щелчку строки.

<table>
  <tr onClick="goToLink()">
    <td>test</td>
    <td>test2</td>
  </tr>
</table>

Я заметил, что gmail не имеет поведения при наведении ярлыка, когда вы наводите курсор мыши на электронное письмо в представлении списка электронной почты.

Я предполагаю, что в браузере есть событие, которое я могу вызвать mimi c, но я не могу найти какую-либо документацию по этому вопросу.

Answer 1

Чтобы достичь желаемого эффекта, вы можете просто обернуть нужные элементы, кликабельные в теге привязки, с помощью ссылки. Например, я поместил этот синий div в тег привязки, теперь весь синий div можно кликнуть и в левом нижнем углу браузера отображается ссылка:

.clickable-div {
  height: 100px;
  width: 100px;
  background-color: blue;
}

<a href="https://stackoverflow.com">
  <div class="clickable-div"></div>
</a>