Получить атрибут href при наведении на ссылку

Question

Даны ссылки. Сделайте так, чтобы по наведению на любую ссылку над ней появлялось значение ее атрибута href.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="dasdas">asdasd</a>
  <a href="dasdasddas">asdasasdasd</a>
  <a href="dasdasdasdas">asdasasdasd</a>
  <script>
    let href = document.querySelector('a')
    document.body.onmouseenter = function(e) {
      let traget = e.target
      console.log(traget.getAttribute('href')) // получаю значение, но с null

      // здесь я остановился и не могу понять как вывести значение атрибута>

    }
  </script>
</body>

</html>

Перечитал главу про события мыши, но все равно не могу понять. Нужно реализовывать через :hover?

Answer 1

Перечитал главу про события мыши, но все равно не могу понять. Нужно реализовывать через :hover?

Видно не совсем внимательно читал... Вот так такое можно реализовать.

document.querySelectorAll('a').forEach(o => o.addEventListener('mouseenter', e => {
  const o = e.target
  if (o.getAttribute('title')) return
  o.setAttribute('title', o.getAttribute('href'))
}))

<a href="dasdas">asdasd</a>
<a href="dasdasddas">asdasasdasd</a>
<a href="dasdasdasdas">asdasasdasd</a>

Answer 2

Давайте разбираться, в самом вопросе обработчик onmouseenter, привязан к document.body, он не будет работать как ожидается потому что срабатывает только один раз, когда курсор входит в область body, потому он не будет работать для отдельных ссылок. Можно было бы оставить document.body но сменить событие на mouseover и использовать делегирование:

const tooltip = document.getElementById('tooltip');

document.body.addEventListener('mouseover', function(e) {
  if (e.target.tagName.toLowerCase() === 'a') {
    tooltip.textContent = e.target.getAttribute('href');
    tooltip.style.display = 'block';

    const rect = e.target.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - tooltip.offsetHeight) + 'px';
  }
});

document.body.addEventListener('mouseout', function(e) {
  if (e.target.tagName.toLowerCase() === 'a') {
    tooltip.style.display = 'none';
  }
});

body {
  padding-top: 100px;
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
  display: none;
  z-index: 99;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="dasdas">asdasd</a>
  <a href="dasdasddas">asdasasdasd</a>
  <a href="dasdasdasdas">asdasasdasd</a>

  <div id="tooltip" class="tooltip"></div>
</body>

</html>

Answer 3

Сделайте так, чтобы по наведению на любую ссылку над ней появлялось значение ее атрибута href

Можно на CSS :)

a:hover {
  position: relative;
}

a:hover::after {
  display: inline-block;
  content: attr(href);
  position: absolute;
  left: 0;
  bottom: 100%;
  color: #000;
  pointer-events: none;
  user-select: none;
}

<br><br>
<a href="dasdas">asdasd</a>
<a href="https://site.com/dasdasddas">asdasasdasd</a>
<a href="dasdasdasdas">asdasasdasd</a>

БЛОГ НА HUSL

Получить атрибут href при наведении на ссылку

Ответы (3 шт):