如何用html和css做这个鼠标悬停背景和字同时变色，不用id，急急急！

如何用html和css做这个鼠标悬停背景和字同时变色，不用id，急急急！

利用 :hover 伪类即可。

示例：
<style> .menu { display: block; } .menu .item { display: inline-block; margin: 6px; padding: 6px 9px; border: 1px solid #ccc; border-radius: 3px; line-height: 1.5em; } .menu .item:hover { background-color: blue; border: 1px solid blue; color: #fff; }</style><div class="menu"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>2016-10-06

用a标签+hover, 例如html如下
<div class="page-container"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> </div>样式:
.page-container a{ display: inline-block; width:40px; height:40px; line-height:40px; text-align:center; margin-right:5px; font-size:14px; background-color: #cccccc; border-radius:3px; color:#333333; text-decoration: none;}.page-container a:hover{ background-color:#18adda; color:#ffffff;}2016-10-06

<style>
a {
float:left;
width:30px;
height:30px;
line-height:30px;
text-align:center;
margin:2px;
color:#888;
background-color:#fff;
border:1px solid #88f;
border-radius:3px;
text-decoration:none
}
a:hover {
color:#fff;
background-color:#88f
}
</style>
<a href="#网址自己搞定">1</a>
<a href="#网址自己搞定">2</a>
<a href="#网址自己搞定">3</a>
<a href="#网址自己搞定">4</a>
<a href="#网址自己搞定">5</a>
<a href="#网址自己搞定">6</a>
<a href="#网址自己搞定">7</a>2016-10-06