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

Question

要求这个不用id=""的做法，加链接那种，鼠标悬停在方块内字和快内背景同时变色，注意————————就像底下这个图片一样，是整个块内的背景，不是只有数字下面占的一小块变色。

Answer 1

利用 :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>

本回答被提问者采纳

Answer 2

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

Answer 3

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