使用JS懸停時如何放大純CSS菜單項？

Question

我有一個純 CSS 菜單，想提供一點視覺反饋。 當 cursor 通過一個項目時，我希望它放大到正常尺寸的 110% 或 120%。

我只是在無序列表中使用文本，沒有圖像。

這可以輕松完成嗎？

---

更新：MS IE 7+（其他任何東西都是獎勵並且可能是免費的）

Answer 1

為此，您實際上並不需要 JavaScript。 CSS 具有將仿射變換應用於元素的transform屬性。 只需執行類似li:hover { transform: scale(1.2); } li:hover { transform: scale(1.2); } 。

它適用於所有最新版本的 Safari 和 Firefox 以及 IE 9 和更高版本 - 如果您願意使用 JavaScript 解決方案， Transformie增加了對解決方案的支持。

我做了一個Fiddle 來說明（包括所有瀏覽器前綴版本，但我實際上並沒有在所有瀏覽器中測試它，所以我可能在某個地方搞砸了）。

Answer 2

最好的辦法是調整 hover 上的字體大小：

li:hover {
    font-size : 1.2em;
}

如果您在em中定義了所有內容，那么整個事情都會調整。 如果您有想要縮放的 static 邊距/等，最好只在 CSS 中重新定義它們，但您也可以使用 Chuck 指出的zoom或transform屬性。