CSS懸浮展示指的就是鼠標(biāo)懸浮在某個(gè)元素上時(shí)，該元素會(huì)出現(xiàn)指定的效果。這個(gè)效果可以是文字顏色、背景色、邊框變化、圖片放大等等。

.example:hover{
background-color: #FFC0CB;
}

這是一個(gè)簡單的例子，當(dāng)鼠標(biāo)懸浮在class為example的元素上時(shí)，該元素背景色變?yōu)榉凵?。注意，要使?hover偽類來實(shí)現(xiàn)懸浮效果。

.example{
width: 200px;
height: 200px;
border: 1px solid #000;
transition: all 0.5s;
}
.example:hover{
width: 300px;
height: 300px;
border-color: #FFC0CB;
}

這是另一個(gè)例子，當(dāng)鼠標(biāo)懸浮在class為example的元素上時(shí)，該元素寬高都將變?yōu)?00px，并且邊框顏色變?yōu)榉凵＿@個(gè)例子中還用到了transition屬性，它指定了動(dòng)畫效果的時(shí)間和過渡方式。

.example{
position: relative;
}
.example .text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
transition: opacity 0.5s;
}
.example:hover .text{
opacity: 1;
}

這個(gè)例子里，我們在class為example的元素里添加了一個(gè)class為text的子元素，該元素包含了一段文字。當(dāng)鼠標(biāo)懸浮在example上時(shí)，text元素出現(xiàn)，文字變?yōu)榭梢?。利用opacity屬性和transition屬性實(shí)現(xiàn)了淡入淡出的效果。