CSS实战-标签展示以及鼠标移上去可删除

1. 标签鼠标移上去可删除

<div class="tagDiv">
<span class="tagItem">item1</span><span class="tagDelete" onclick="deleteTag('item1')">X</span>
</div>
<div class="tagDiv">
<span class="tagItem">item2</span><span class="tagDelete" onclick="deleteTag('item2')">X</span>
</div>

.tagDiv {
display: inline-block;
color: #FFFFFF;
font-size: 12px;
margin-right: 10px;
}
.tagDiv span {
background-color: #009688;
padding: 3px 8px;
}
.tagItem {
border-radius: 3px;
}
.tagDelete {
border-radius: 0 3px 3px 0;
display: none;
}
.tagDiv:hover {
cursor: pointer;
}
.tagDiv:hover .tagItem {
border-radius: 3px 0 0 3px;
}
.tagDiv:hover .tagDelete {
display: inline;
}
.tagItem:hover {
background-color: #018074;
}
.tagDelete:hover {
background-color: #018074;
}