cssam cssam - 2 months ago 7
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!

EDITED:

Here is the code in 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

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) {
        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/