H5取經之路 新增hover實現特定效果

2022-05-02 14:27:13 字數 1071 閱讀 6205

一、滑鼠指上後顯示***,效果圖如下:

滑鼠未指上時:

滑鼠指上後:

**如下:

.div1 .li2 .code_wexin.div1 .li2:hover .code_wexin
原理:將該***另設乙個div,滑鼠未指上時,設定該div寬高為0,滑鼠之上時,給其設定乙個合適的寬高

二、滑鼠指上後,按鈕變色,背景圖放大,效果圖如下:

滑鼠未指上時:

滑鼠指上後:

按鈕變色的**:

.div6 .f2_content .video_card.div6 .f2_content>div:hover .video_card
背景圖放大**:

.div6 .f2_content .img

.f_family .div6 .f2_content > div:hover img

原理:讓在乙個固定大小的父容器中進行放大,用transfo標籤(如果盛放的父容器沒有固定大小,會溢位)

三、滑鼠指上後,該塊未發生變化,其他塊透明度改變,效果圖如下:

滑鼠未指上時:

滑鼠指上時:

**如下:

.f6 .f6_content ul:hover li:not(:hover)
原理:運用not標籤,當滑鼠之上某個li時,反選,給其設定乙個透明度。

H5取經之路 隨便寫點兒

相對定位 1 使用position relative 設定元素為相對定位的元素 2 定位機制 相對於自己原來文件流中的的位置定位,當不指定top等定位值時,不會改變元素位置 相對定位元素,仍會佔據原來文件流中的位置,而不會釋放 3 使用top left bottom right調整位置,當left和...

h5 新增屬性

預設提示內容 placeholder 多輸入,多提交 multiple 支援乙個域中多輸入,逗號隔開,一般配合郵箱和url型別使用 自動獲取焦點,頁面載入,自動獲取焦點游標 autofocus 防止空提交 required 允許輸入的最小字元數和最大字元數 minlength 允許輸入的最小字元長度...

H5新增屬性

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title cursor pointer 出現小手 button 屬性選擇器使用方法 相當於交集選擇器,即表示既有button屬性...