CSS可以為圖片設置懸浮窗,讓鼠標懸停在圖片上時顯示一些提示信息,增加網頁的交互性和美觀性。
/* 首先定義一個類名,為圖片設置樣式 */ .img-hover { display: inline-block; /* 讓圖片可以橫向排列 */ position: relative; /* 設置為相對定位,用于后面絕對定位元素的定位基準 */ overflow: hidden; /* 隱藏超出部分,讓懸浮窗定位準確 */ } /* 設置鼠標懸浮時圖片的狀態 */ .img-hover:hover { cursor: pointer; /* 鼠標指針變為手型,表示可點擊 */ } /* 定義懸浮窗的樣式 */ .img-hover .tip { display: none; /* 初始狀態不顯示 */ position: absolute; /* 絕對定位 */ bottom: -30px; /* 窗口在圖片下方顯示 */ left: 50%; /* 水平居中 */ transform: translateX(-50%); /* 水平居中 */ padding: 5px 10px; /* 設置內邊距 */ background-color: #000; /* 背景顏色 */ color: #fff; /* 文字顏色 */ font-size: 14px; /* 字號 */ white-space: nowrap; /* 不換行 */ } /* 設置鼠標懸浮時懸浮窗的狀態 */ .img-hover:hover .tip { display: block; /* 顯示懸浮窗 */ }
以上代碼中,通過設置圖片父元素的相對定位和懸浮窗元素的絕對定位,使得懸浮窗相對于圖片進行定位,并通過設置鼠標懸浮時父元素和懸浮窗元素的狀態,實現了鼠標懸浮時顯示提示信息的效果。