2016-12-20 1 views
0

아래 코드가 제 코드입니다. 미리보기 이미지가 표시되면 제거 버튼을 표시하고 싶습니다. F12 키를 눌러 코드의 요소를 검사하면 이미지에 이미지가 추가되었음을 알 수 있지만 축소판 이미지가 표시되면 제거 단추가 표시되지 않습니다. 다른 사람이 문제를 해결하도록 도와 줄 수 있습니까? 미리 감사드립니다. 건배!Javascript & CSS : 마우스를 올리면 제거 버튼이 표시되지 않습니다.

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); 

자바 스크립트

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> 

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); 
} 
+1

당신이 우리가 문제를 해부하는 것이 더 쉽게하는 jsfiddle 또는 동등한에 넣어 수 있다면 그냥이 감추고 코드의 대부분보고에서, 그것은 멋진 것 –

답변

0

죄송 사람 내 나쁜. 나는 내 자바 스크립트와 remove.css를 수정하여 마우스를 올렸을 때 제거 버튼을 보여 주었다.

Remove.css에서 나는 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; 
} 

자바 스크립트

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); 
    } 
관련 문제