在这张图片中我们可以看到,

当鼠标指针放到文字与日期显示之间的空白处时,a标签的hover功能仍然可以实现

所以我们可以知道,左边的文字部分与右边的日期是处于同一个a标签下的

但是因为要设置宽高和位置,所以就有分别给左右两边设置了一个div盒子

那么现在需要注意的就是hover到底要加给谁

首先来看代码

 

 通过这张图可以清楚地看到各级所处的关系

那么接下来看一下css样式的设置

首先要知道,在上面代码的设置中,

a标签的子代是div.title和div.date,而不是span,hover无法使盒子变色，所以不会实现

那么代码的设置就要明确关系

如下

 

有特别重要的一点需注意: !important不能随便使用

除非是万不得已的情况下

在这里是因为受其他代码的影响,不得已将这行代码置顶

还有一点,如果真的到了十万火急的情况必须使用 !important,

那么一定要知道这几点:

1. !important的使用位置——在分号的前面;

2. !important的书写格式——(空格)!important

以上