<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.button{
margin:20px;
width: 100px;
height: 60px;
border: 1px solid goldenrod;
position: relative;
}
.close_button{
display: none;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
background-color: black;
color: white;
border: 1px solid black;
border-radius:9px;
font-size: 14px;
position: absolute;
right: -10px;
top:-10px;
}
.close_button:hover{
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="button">1<span class="close_button fa fa-close"></span></div>
<div class="button">2<span class="close_button fa fa-close"></span></div>
<script>
let button = document.getElementsByClassName("button");
for(let i = 0 ;i < button.length;i++){
button[i].onmouseover = function (event) {
this.children[0].style.display = "block";
event =event||window.event;
event.stopPropagation();
}
}
document.onmouseover =function () {
let close_buttons = document.getElementsByClassName("close_button");
for(let i =0;i<close_buttons.length;i++){
close_buttons[i].style.display = "none";
}
}
let close_buttons = document.getElementsByClassName("close_button");
for(let i = 0 ;i < close_buttons.length;i++){
close_buttons[i].addEventListener("click",function () {
// alert("確定刪除該關鍵詞麼");
this.parentNode.style.display = "none";
})
}
</script>
</body>
</html>
