线上效果图：
上代码
如有需要请参考代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
width: 500px;
height: 40px;
margin:10px;
background: #ccc;
text-align: center;
}
li span {
display: none;
}
li:hover span{
display: inline;
}
li:hover+span{
display: inline;
}
</style>
</head>
<body>
<ul>
<li><span>-</span>1<span>-</span></li>
<li><span>-</span>2<span>-</span></li>
<li><span>-</span>3<span>-</span></li>
<li><span>-</span>4<span>-</span></li>
<li><span>-</span>5<span>-</span></li>
<li><span>-</span>6<span>-</span></li>
</ul>
<!-- *利用hover修改其它标签样式
hover可以修改包含在它里面的元素的样式。也可以通过兄弟元素“+”来修改外面元素的样式：
注意：兄弟元素必须有相同的父节点，且紧紧相邻（之间不能有任何其他标签）。 -->
</body>
</html>