昨天寫樣式遇到個(gè)問(wèn)題，如何讓鼠標(biāo)懸浮DIV后，顯示DIV外的按鈕，可以點(diǎn)擊到按鈕。

效果如下：

問(wèn)題：

在DIV hover時(shí)候?qū)粹o設(shè)為display: block，這是很直接的想法，但是這有個(gè)問(wèn)題，就是在懸浮出現(xiàn)按鈕后，鼠標(biāo)要移到按鈕上過(guò)程中，離開了DIV經(jīng)過(guò)間距時(shí)，按鈕就會(huì)消失。

解決辦法：

1. 選擇更大區(qū)域的DIV

這個(gè)時(shí)候hover出現(xiàn)的按鈕，由于鼠標(biāo)還在DIV（大區(qū)域）中，所以按鈕是可以正常點(diǎn)到的。但這個(gè)方法問(wèn)題在于擴(kuò)大了觸發(fā)區(qū)域，如果本意上是要最初的DIV來(lái)觸發(fā)，那這個(gè)方法就不行。

2.增加一個(gè)不可見層

如藍(lán)色框所示，在DIV增加一個(gè)絕對(duì)定位的區(qū)域至按鈕底下，這樣在鼠標(biāo)移到按鈕過(guò)程中，都屬于在DIV內(nèi)部，按鈕也就不會(huì)消失。這個(gè)方法的好處在于，絕對(duì)適當(dāng)?shù)挠|發(fā)區(qū)域。

div{
    position:absolute;
    .hover-help{
        position: absolute;
        height: 20px;
        width: 26px;
        left: -20px;
        bottom: 0;
    }    
} 

總結(jié)

以上所述是小編給大家介紹的CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論