Javascript＆CSS：“悬停”按钮在悬停时不会显示

Question

Below is my code snippet. I want the remove button to show when a thumbnail image is hovered. I press F12 to inspect element of the code, it showed that it was appended in the image but when a thumbnail image is hovered no remove button showed up. Can someone help me fix the issue? Thank you in advance. Cheers!

personDom.onclick = (function(person, that) {
return function(e) { 
    var retVal = c.faces.onclick(person);
    var input = inputBox[0].id;
    var divId;
    var requiredImgList = document.getElementById("imageReqDivList");
    var optionalImgList = document.getElementById("imageOpDivList");
    var fyiImgList = document.getElementById("imageFYIDivList");
    var arrayList;
    var unique = true;
    if(input == "required") {
        divId = "requiredImage";
        arrayList = requiredImgList.value.split(", ");
        for (var i = 0; i < arrayList.length; i++) {
            if(arrayList[i].startsWith(person.email)) {
                unique = false;
                alert("This person has already been added");
            }
        }
        if(unique) {
            requiredImgList.value = requiredImgList.value + person.email + ", ";
        }
     document.getElementById('required').value = "";
    } 
     else if(input == "optional") {   
         divId = "optionalImage";
         arrayList = optionalImgList.value.split(", ");
         for (var i = 0; i < arrayList.length; i++) {
             if(arrayList[i].startsWith(person.email)) {
                 unique = false;
                 alert("This person has already been added");
             }
         }
         if(unique) {
             optionalImgList.value = optionalImgList.value + person.email + ", ";
         }   
         document.getElementById('optional').value = "";
     }
     else if(input == "fyi") {   
         divId = "fyiImage";
         arrayList = fyiImgList.value.split(", ");
         for (var i = 0; i < arrayList.length; i++) {
             if(arrayList[i].startsWith(person.email)) {
                 unique = false;
                 alert("This person has already been added");
             }
         }
         if(unique) {
            fyiImgList.value = fyiImgList.value + person.email + ", ";
         }
         document.getElementById('fyi').value = "";
    }
    if(unique) {
       get_data(person.email, person.uid, divId);
    }

    //If the click handler returns a value, then put it in the input
    if ( typeof retVal == "string" ) {
       h.setValue(inputBox, retVal);
       this.hideResults();
       inputBox[0].focus();

    }
}.bind(that);
})(result, this);

Javascript

function get_data(email, userId, divId) {
createImage("https://www.apparels.com/image/"+ useId +"?s=60", email, useId, divId);
}

function createImage(src, alt, title, divId) {
     var img = document.createElement("img");
     img.style.zIndex = -1;
     var imgDelIcon = document.createElement("a");
     imgDelIcon.style.zIndex = 1;
     img.src = src;
     if (alt != null) img.alt = alt;
     if (title != null) img.title = title;
     imgDelIcon.href = "#";
     imgDelIcon.className = "delete";
     img.setAttribute("class", "img-circle");
     document.getElementById(divId).appendChild(img); 
     document.getElementById(divId).parentNode.appendChild(imgDelIcon);
}

HTML

    <div class="form-group">
    <label class="control-label col-md-3" for="event">Required:</label>
    <div class="col-md-7">
        <input type="event" class="typeahead form-control" id="required" placeholder="Enter required attendees">
        <div id="container">
            <div id="requiredImage" alt="Faces"></div>
        </div>
        <textarea id="imageReqDivList" hidden="true" readonly="true"></textarea>
    </div> 
</div>

    <div class="form-group">
        <label class="control-label col-md-3" for="event">Optional:</label>
        <div class="col-md-7">
            <input type="event" class="typeahead form-control" id="optional" placeholder="Enter optional attendees">
            <div id="optionalImage" alt="Faces"></div>
            <textarea id="imageOpDivList" hidden="true" readonly="true"></textarea>
        </div> 
    </div>

    <div class="form-group">
        <label class="control-label col-md-3" for="event">FYI:</label>
        <div class="col-md-7">
            <input type="event" class="typeahead form-control" id="fyi" placeholder="Enter to be informed attendees">
            <div id="fyiImage" alt="Faces"></div>
            <textarea id="imageFYIDivList" hidden="true" readonly="true"></textarea>
        </div> 
    </div>

CSS

    Remove.css:
#container { 
    overflow:auto; 
}
.image { 
    width:60px;
    height:60px;
    float:left;
    position:relative; 
}
a.delete { 
    display:none;
    position:absolute;
    top:0;
    right:-3;
    width:20px;
    height:20px;
    background-size: auto 30px;
    border-radius: 50px;
    text-indent:-999px;
}
a.delete:hover { 
    border: 1px solid blue;
}
.image:hover 
a.delete { 
    display:block; 
}


Demo.css:
body {
    font-family: sans-serif;
    text-align: center;
    background-color: #fafafa;
}
header h1 {
    font-size: 5em;
    color: #6c7d95;
    font-weight: bold;
    text-shadow: 1px 1px white, -1px -1px black;
    /* text-shadow: #fff 1px 1px 0; */ 
    margin: 30px 0;
}
.typeahead {
    width: 490px;
    padding: 5px;
    border: 1px solid #888888;
    /* -moz-box-shadow: 0px 0px 2px 0px #e4e4e4; */
    -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.75);
}

Answer 1

Can you reproduce your issue in this link

https://plnkr.co/edit/yUa9OlT7QAgcioeqscdN

function get_data(email, userId, divId) {
 createImage("https://www.apparels.com/image/"+ useId +"?s=60", email, useId, divId);
}

Answer 2

Sorry guys my bad. I modified my javascript and remove.css to show remove button when hovered.

In Remove.css, I eliminate position: absolute in a.delete.

#container { 
    overflow:auto; 
}
.image { 
    width:60px;
    height:60px;
    float:left;
    position:relative; 
}
a.delete { 
    display:none;
    top:0;
    right:-3;
    width:20px;
    height:20px;
    background-size: auto 30px;
    border-radius: 50px;
    text-indent:-999px;
}
a.delete:hover { 
    border: 1px solid blue;
}
.image:hover 
a.delete { 
    display:block; 
}

Javascript

function createImage(src, alt, title, divId) {
        var img = document.createElement("div");
        img.style.backgroundImage = "url("+ src +")";
        if (alt != null) img.alt = alt;
        if (title != null) img.title = title;
        img.setAttribute("class", "img-circle");

        var imgDelIcon = document.createElement("button");
        imgDelIcon.style.zIndex = 1;
        imgDelIcon.type = "button";
        imgDelIcon.className = "remove";

        document.getElementById(divId).appendChild(img);
        img.appendChild(imgDelIcon);
    }