<!doctype html>
<html>
<head>
<style>
.item{
line-height:100px;
font-size:50px;
height:100px;
clear:both;
}
.item .text{
display: inline-block;
float:left;
}
.item:hover .close{
display:inline-block;
}
.close {
position: relative;
display: none;
100px;
height: 100px;
overflow: hidden;
border-radius:50px;
background:black;
opacity:0.5;
}
.close:hover{
cursor:pointer;
opacity:1;
}
.close::before, .close::after {
content: '';
position: absolute;
80%;
top: 50%;
left: 10%;
height: 12px;
margin-top: -6px;
border-radius: 5px;
background: #ffffff;
}
.close::before {
transform: rotate(45deg);
}
.close::after {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="container">
<div class="item"><span class="text">请移动到我的上面</span/><span class="close"></span></div>
<div class="item"><span class="text">请移动到我的上面</span/><span class="close"></span></div>
<div class="item"><span class="text">请移动到我的上面</span/><span class="close"></span></div>
</div>
<script>
document.querySelector('#container').addEventListener('click', function(e){
if(e.target.className == 'close') {
var p = e.target.parentNode;
p.parentNode.removeChild(p);
}
})
</script>
</body>
</html>