This is an explanation of the video content.
 用技术延续对ACG的热爱
...
44

 |   | 

实现鼠标悬浮在网页中的内容关键字上时，出现提示卡片

实现鼠标悬浮在网页中的内容关键字上时，出现提示卡片 

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

<head>
  <meta charset="UTF-8">
  <title>检测关键词</title>
  <style>
    .technology-keyword-tooltip {
      position: absolute;
      z-index: 999;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      display: none;
    }

    .technology-keyword {
      color: rgb(81, 81, 81);
      font-weight: 600;
      cursor: text;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>
  <div id="kok">
    <p>这是一个<span class="technology-keyword">break关键字</span>的例子。</p>
  </div>


  <script>
    function detectKeywords(element, language_type) {
      var tooltip = document.createElement('div');
      tooltip.className = 'technology-keyword-tooltip';
      document.body.appendChild(tooltip);

      $.ajax({
        url: './front-end-keywords.json',
        dataType: 'json',
        success: function (data) {
          var keywords = data[language_type].keywords;
          $('p').each(function () {
            for (var i = 0; i < keywords.length; i++) {
              if ($(element).text().indexOf(keywords[i]) >= 0) {
                $(element).html($(element).html().replace(new RegExp(keywords[i], 'g'), '<span class="technology-keyword">' + keywords[i] + '</span>'));
              }
            }
          });

          $('.technology-keyword').on('mouseover', function (e) {
            var text = this.textContent || this.innerText;
            console.log(text)

            tooltip.innerHTML = `
            <h4 class="technology-keyword">${text}</h4>
            <p>语法解释：这是一个示例关键字break。</p>
            `;
            tooltip.style.top = (e.pageY + 10) + 'px';
            tooltip.style.left = e.pageX + 'px';
            tooltip.style.display = 'block';
          });

          $('.technology-keyword').on('mouseout', function (e) {
            tooltip.style.display = 'none';
          });
        }
      });
    }

    $(document).ready(function () {
      detectKeywords("#kok", "js");
    });
  </script>
</body>

</html>

json文件

{
     "js": {
        "keywords": [
            "break",
            "case",
            "catch",
            "const",
            "continue",
            "debugger",
            "default",
            "delete",
            "do",
            "else",
            "export",
            "extends",
            "finally",
            "for",
            "function",
            "if",
            "import",
            "in",
            "instanceof",
            "let",
            "new",
            "return",
            "super",
            "switch",
            "this",
            "throw",
            "try",
            "typeof",
            "var",
            "void",
            "while",
            "with"
        ]
},

44 🖺前端 ↦ JavaScript开发技巧 __ 211 字
 JavaScript开发技巧 #2