懸停彈出式窗口代碼在瀏覽器中保持彈出狀態 - 只能使用CSS

Question

我與我公司的網站有很大的關係。我的公司已經在這個網站上花費了數千美元，並且我僅限於使用非開源CMS系統。我必須付出努力（並且我們支付了1200美元），所以我可以提供一個CSS頁面供我們工作。我們的網站開發人員向我們提供了每一個小變化的最新信息，所以我不能要求他們編程（他們可能估計3美元-5k的工作）。

我們原來的燈塔頁面，在這裏（生活）：http://www.golakehavasu.com/activities/more_to_do/lighthouses.aspx有這個可怕的代碼，用戶點擊燈塔名稱和一個單獨的窗口彈出一張燈塔的照片。到用戶完成時，已經打開了23個獨立的窗口。由於我們是一個休假社區，冬天我們得到了很多的雪鳥，我必須解釋如何雙擊，我們接到他們的電話，想知道爲什麼我們的網站破壞了他們的電腦（是的，這真的發生了）。我很樂意忽略這些電話，但我不能。我需要一個更好的解決方案來處理那些不懂網絡的人。

我想將這些圖片轉換爲懸停/彈出的情況，儘管由於開發者對網站的鎖定（而不是一個完整的技術頭部編碼器）而受到很大限制，但我能夠研究一些代碼，讓彈出窗口合理地工作。測試頁面在這裏（不生活）：http://www.golakehavasu.com/test.aspx

一個主要問題：當靠近燈塔表的底部時，燈塔照片在頁腳下面，不可見;這不會與老闆一起飛行。我需要這些彈出窗口保留在瀏覽器窗口中，並且無權直接將文件上載到服務器（我只能通過CMS後端系統創建頁面）。我的手綁在這裏。 任何幫助將不勝感激，它會給我與老闆的一些重要分數（並可能幫助我全職僱用醫療保險福利）。

我試圖複製/粘貼我的代碼，但它被剝離。試圖發佈網站，我得到的代碼，但該系統說我的聲譽低於10，所以我不能發佈超過2個鏈接。

再次請幫助。

Answer 1

我不知道爲什麼我這樣做，除了我真的很無聊......

設置.lighthousepopup a:hover span有margin-top: -350px;。這將推動圖片，使底部與超鏈接內嵌，並且不會脫離屏幕底部。

但是現在你在頂端有同樣的問題，所以你需要修復前幾行，使用nth-child選擇器沒有這個。由於表格的奇怪佈局（列標題下方的標題以及tbody中的所有內容，實際上？），第一行實際上是第6行，因此您需要從那裏開始。

table.grid tr:nth-child(6) td .lighthousepopup a:hover span, 
table.grid tr:nth-child(7) td .lighthousepopup a:hover span, 
table.grid tr:nth-child(8) td .lighthousepopup a:hover span, 
table.grid tr:nth-child(9) td .lighthousepopup a:hover span 
{ 
    margin-top: 0px; 
} 

所以現在1-4行有鏈接的圖像內嵌的頂部，而表的其餘部分與該鏈接的圖像內嵌的底部。