在網(wǎng)站的設(shè)計中，常常需要使用二維碼來增加互動性或者提供更多的信息，而CSS懸浮顯示二維碼的實現(xiàn)方式就可以達到這個效果。

實現(xiàn)方式如下：

.qr-code{
position:relative;
display:inline-block;
}
.qr-code:hover .qr-code-img{
display:block;
}
.qr-code-img{
display:none;
position:absolute;
top:30px;
left:0;
z-index:99;
background-color:#fff;
box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.qr-code-img img{
width:100px;
height:100px;
}

首先，在html中嵌入二維碼圖片，并設(shè)置它的class為“qr-code-img”：

然后，設(shè)置一個包裹二維碼圖片的div，它的class為“qr-code”。接著，設(shè)置這個div的position屬性值為relative，這將使它作為相對定位的容器。接下來，當(dāng)用戶鼠標(biāo)懸浮在這個div上時，設(shè)置這個div的子元素qr-code-img的display屬性值為block，即顯示出二維碼圖片。而在未懸浮時，將qr-code-img的display屬性值設(shè)為none。

接著，設(shè)置qr-code-img的position屬性值為absolute，它將相對于qr-code父元素的最近定位祖先元素移動。然后，設(shè)置qr-code-img的top和left屬性值，這會使它出現(xiàn)在qr-code下方。此外，為了防止qr-code-img被覆蓋，將其z-index屬性值設(shè)為99。最后，為qr-code-img設(shè)置一個白色的背景和陰影效果，讓二維碼圖片更加突出。

使用CSS懸浮顯示二維碼，可以減少頁面中二維碼的占用空間，也不會讓網(wǎng)站看起來雜亂無章。同時，用戶可以在需要時對它進行訪問，這樣就可以方便地獲取更多有關(guān)產(chǎn)品或者服務(wù)的信息。