在這張圖片中我們可以看到,

當滑鼠指標放到文字與日期顯示之間的空白處時,a標籤的hover功能仍然可以實現

所以我們可以知道,左邊的文字部分與右邊的日期是處於同一個a標籤下的

但是因為要設定寬高和位置,所以就有分別給左右兩邊設定了一個div盒子

那麼現在需要注意的就是hover到底要加給誰

首先來看程式碼

通過這張圖可以清楚地看到各級所處的關係

那麼接下來看一下css樣式的設定

首先要知道,在上面程式碼的設定中,

a標籤的子代是div.title和div.date,而不是span,hover無法使盒子變色，所以不會實現

那麼程式碼的設定就要明確關係

如下

有特別重要的一點需注意: !important不能隨便使用

除非是萬不得已的情況下

在這裡是因為受其他程式碼的影響,不得已將這行程式碼置頂

還有一點,如果真的到了十萬火急的情況必須使用 !important,

那麼一定要知道這幾點:

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

2. !important的書寫格式——(空格)!important

以上