滑鼠移動 hover的一種用法

2021-09-26 15:02:50 字數 1207 閱讀 1452

2016-07-01 14:22

網頁設計

標籤:css

1101 

今天看到@網格傳媒主題模版,在延伸文章閱讀中,我們看到將滑鼠移動到+標題的文章上,和背景以及錨文字的文字顏色一起變化了。這種變化,我們可以很簡單的知道是通過:hover這個css**來實現的,但我一開始未明白,是通過何種方式讓它一起變化的。

...    

其實我發現,所有的變化元素全部是圍繞.hot-single這個div來做的。當滑鼠移動到這個框架裡,我們要它做的反應是按比例放大、背景變為藍色、文字變白,並且,這些東西都有乙個延遲。

一開始我錯誤的在img,a上分別做了:hover屬性,發現變化起來怪怪的,表現是不整體,後來偷看了下@網格傳媒的**,發現原來可以通過:hover img,:hover a這種方式來實現。那麼,這部分的整體**就可以變成如下形式了:

/*防止溢位*/

.hot-single

/*給變化乙個0.5秒的反應時間,相容瀏覽器*/

.hot-single:hover,

.hot-single img:hover,

.hot-single:hover img,

.hot-single a:hover,

.hot-single:hover a

/*滑鼠移到div:背景變色*/

.hot-single:hover

/*滑鼠移到div:框架下a顏色變色*/

.hot-single:hover a

.hot-single:hover img

這樣,我們就可以很好的實現乙個:hover多點反應的效果了。但我測試了一會,發現滑鼠移動上去很舒服,但滑鼠移動走時太生硬了。於是,我同樣給img加了乙個反應時間,**變成這樣:

.hot-single,

.hot-single:hover,

.hot-single img,/*增加的平滑過渡*/

.hot-single img:hover,

.hot-single:hover img,

.hot-single a:hover,

.hot-single:hover a

alarm的一種用法。

alarm函式可以用於防止讀阻塞。但如果系統呼叫是自動重啟動的,當從sigalrm訊號處理程式返回時,read並不被中斷。在這種情形下,設定時間限制不起作用。一 源 cat n 10 10.c 1 include apue.h 23 static void sig alarm int sig no ...

Oracle update的一種用法

用於大資料量的更新,效率比較高,括號內的select語句為虛擬表,要求where欄位必須是主鍵或唯一索引 b.customer id和a.customer id 記錄一下,以後用得上。例子 update select a.city name,b.city name as new name from ...

中文編碼的一種用法

這裡通過乙個測試某些ip位址是否為特定 的例子來說明。我們假設該 的編碼用的是gb2312,並通過獲取該 的title作為檢測依據。usr bin env python encoding utf 8 略去獲取網頁的 re.ignorecase title 論壇標題 m re.search title...