cssam cssam - 11 months ago 37
CSS Question

Links not working inside div element that appears on mouse over

I'm creating a JavaScript function which will parse data (which will be retrieved from a database, but its just static here for testing) and format it into links and place it into a div element (popup) that will show up when the mouse is hovered onto the icon. However, I cannot figure out why the links are not clickable. I can right click it and open it in a new tab, but I cannot directly click and open them. Also, it works on Firefox, but not Chrome, or Safari!


Here is the code in JSFiddle:


<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">
<div id="p1popup" class="popup" style="display: none">


.parent {
position: relative;

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

.parent:hover .popup {
display: block;
top: 0px;
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 Source

You can add the nodes like this (It works on Chrome):

function parseWebsites() {
    var text = document.getElementById('p1data').innerHTML;
    var lines = text.split("#");
    var string = "";
    var myNode = document.getElementById("p1data");
    while (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").innerHTML = string;