javascript - 链接在鼠标悬停时出现的 div 元素内不起作用

Question

我正在创建一个 JavaScript 函数，它将解析数据(将从数据库中检索，但它只是静态的用于测试)并将其格式化为链接并将其放入将显示的 div 元素(弹出窗口)中当鼠标悬停在图标上时。但是，我无法弄清楚为什么这些链接不可点击。我可以右键单击它并在新选项卡中打开它，但我不能直接单击并打开它们。此外，它适用于 Firefox，但不适用于 Chrome 或 Safari!

编辑:

这是 JSFiddle 中的代码: https://jsfiddle.net/kvdju2ju/2/

HTML

<table>
  <tr>
    <td>
        <div id="p1" class="parent">
          <img src="http://www.free-icons-download.net/images/blue-square-icon-47147.png" style="border-width:0px;"/>
          <div id="p1data" class="data" style="display:none">
             Website1#http://www.google.com#Website2#http://www.Link2.com#Website3#http://www.Link3.com"
          </div>
          <div id="p1popup" class="popup" style="display: none">
          </div>
        </div>
    </td>
  </tr>
</table>

CSS

.parent {
  position: relative;
}

.parent .popup {
  display: block;
  position:absolute;
  top: 0px;
  left:20px;
  background-color: #FFFFFF;
  padding: 5px;
  outline: black solid 1px;
}

.parent:hover .popup {
  display: block;
  position:absolute;
  top: 0px;
  left:20px;
  background-color: #FFFFFF;
  z-index: 100;
  outline: black solid 1px;
}

.popup a:link { color: #003300; text-decoration: none;}
.popup a:visited { color: #003300; }
.popup a:hover { color: #006600; }
.popup a:active { color: #006600; }

Answer 1

您可以像这样添加节点(它适用于 Chrome):

function parseWebsites() {
    var text = document.getElementById('p1data').innerHTML;
    var lines = text.split("#");
    var string = "";
    var myNode = document.getElementById("p1data");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    for (var i = 0; i < lines.length - 1; i = i + 2) {
       var webtitle = lines[i];
       var website = lines[i + 1];
       //string = string + "<a href='" + website + "' target='_blank'>" + webtitle + "</a> <br> ";
       var node = document.createElement("a"); // Create a <a> node
       var textnode = document.createTextNode(webtitle); // Create a text node
       node.appendChild(textnode); // Append the text to <a>
       node.href = website;
       node.target = "_blank";
       document.getElementById("p1popup").appendChild(node); // Append <a> to <div> with id="p1popup"
       var br = document.createElement("br"); // Create a <br> node
       document.getElementById("p1popup").appendChild(br);
   }
   //document.getElementById("p1popup").innerHTML = string;
}

https://jsfiddle.net/s8st79w0/1/