如何腳本CSS基於懸停

忽略Internet Explorer 6和後者實現隱藏/顯示效果，我怎麼腳本的css來達到以下效果：如何腳本CSS基於懸停

Hide Show

這將隱藏直到UpgradeI，UpgradeII或UpgradeIII被徘徊。網站鏈接Here

有類似的大約500頁，所以調整或HTML添加JavaScript是不可行的。我認爲CSS是去做到這一點的方式，但我已經試過：

div.UpgradeI {display:none;} 
div.UpgradeI:hover {display:inline;}

，但它只是隱藏了一切，徘徊時，不顯示信息。無論如何，如果它不可能使用CSS來實現相同的結果，請告訴我要添加什麼代碼。謝謝！

來源

2011-04-03 UrBestFriend

這是一些非常糟糕的標記我見你的網頁... – BoltClock 2011-04-03 04:27:02

這麼多[不必要]（http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html）和[畸形]（HTTP：//驗證.w3.org /檢查？URI = HTTP％3A％2F％2Fbfcards.edicypages.com％2Flist-的卡％2Fabyssal-看守火＆字符集=％28detect +自動％29＆DOCTYPE =內嵌＆組= 0）表。 – 2011-04-03 04:29:38

@安德魯馬歇爾：另外，''。 – BoltClock 2011-04-03 04:30:41

好吧，這可能與CSS來做到這一點。首先，你建議的那些樣式不起作用，因爲如果它開始時顯示：沒有，沒有什麼可以懸停在下一個樣式踢。

我能夠將此添加到您的網站與Firebug：

div.UpgradeI, 
div.UpgradeII, 
div.UpgradeIII { 
    height:20px; 
    overflow:hidden; 
} 

div.UpgradeI:hover, 
div.UpgradeII:hover, 
div.UpgradeIII:hover { 
    height:auto; 
}

這是歷史上最醜陋的黑客攻擊，但它在不改變HTML或添加Javascript的情況下達到了預期的效果。下面的段落不會上滑，因爲所有內容都是絕對定位的。如果你開始對其他所有東西都使用浮動樣式，它會起作用。

很明顯，你可以編輯的高度來顯示更多/更少的div是必要的。

來源

2011-04-03 04:41:00 jbrookover

謝謝！這工作非常好！ – UrBestFriend 2011-04-03 05:12:05

順便說一句，有沒有辦法讓所有的信息在徘徊時出現 - 而不僅僅是個別的div？ – UrBestFriend 2011-04-03 05:23:51

Heh，巧妙的解決方案+1 – BoltClock 2011-04-03 05:38:01

這將是很難只用css來做到這一點。因爲一旦將元素樣式設置爲display：none，就不可能通過元素捕獲：hover事件。

我會建議使用jquery在空的地方創建一個位置保持元件。當鼠標懸停在這個元素上，然後顯示替代的「真實」元素。

您可以試試這個插件，看看你喜歡它。 http://cherne.net/brian/resources/jquery.hoverIntent.html

來源

2011-04-03 04:39:54

UpgradeI table, UpgradeII table, UpgradeIII table { 
    display: none; 
} 
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child { 
    display: inline; 
} 
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table { 
    display: inline; 
}

順便說一句：你的標記是痛苦的。

來源

2011-04-03 04:44:38 buschtoens

是的，我知道，還有其他方法可以做到嗎？我應該用div替換表嗎？它不會結束嗎？ – UrBestFriend 2011-04-03 05:31:41

這個工作在Firefox 4.0（及可能的Firefox 3.0，Chrome瀏覽器，Safari瀏覽器等;雖然我沒有對他們進行測試）。這肯定不會在IE6工作，因爲IE6不支持：懸停任意元素上：第n個孩子（）選擇和兄弟選擇（〜）：

div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) { 
    display: none; 
} 
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * { 
    display: block; 
}

來源

2011-04-03 05:01:59

如何腳本CSS基於懸停

回答

相關問題