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/

Answer 2

你没有锚，你没有href

你遗失了href
尝试添加一个

<a id="p1" class="parent" href='https://www.google.com'>
 <div> 


   <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>
 </a>

Answer 3

这是否只能在桌面上工作，如果是这样，你很好，但我不知道它是否适用于移动设备。

如果你想要一些更干净的代码并删除JS，我认为这会增加一些复杂性，并且需要在浏览器部分上额外加载，我会尝试使用CSS方法：hover。你可以达到同样的效果。一个例子如下。此外，我认为linkedin使用这种方法导航。我认为bettycrocker.com和pillsbury.com也使用它。

http://www.w3schools.com/howto/howto_css_dropdown.asp

链接在鼠标悬停时出现的div元素内部无效

3 个答案: