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