色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css圖片設置懸浮窗

林國瑞1年前6瀏覽0評論

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; /* 顯示懸浮窗 */
}

以上代碼中,通過設置圖片父元素的相對定位和懸浮窗元素的絕對定位,使得懸浮窗相對于圖片進行定位,并通過設置鼠標懸浮時父元素和懸浮窗元素的狀態,實現了鼠標懸浮時顯示提示信息的效果。