鼠標懸停在下拉菜單上時CSS封面圖像的大小調整

Question

我的網站有問題，我創建了一個CSS菜單，該菜單是某些元素上的下拉菜單。 我使用圖像作為封面。 當我將鼠標放在下拉菜單的元素上時，封面會更改位置。 我的測試網站是http://unibenefits.gr/test2/tripoli 。

Answer 1

當您將background-image設置為cover ，它將填充您為其分配的整個元素（通常是HTML或Body ）。 如果元素的大小更改，這將更改-例如，如果您調整瀏覽器窗口的大小，則background-image將調整大小以適合它。

下拉菜單中的某些內容導致網站設計水平溢出（即，設計在某些過渡時會略有變化，因此設計會比瀏覽器窗口略寬）。 依次創建一個水平滾動條。 水平滾動條會占用瀏覽器窗口中的空間，並有效地調整其大小。 這就是cover背景圖像調整大小的原因-盡管它們看起來很相似，但實際上並沒有改變位置。

如果您可以確定菜單中的什么導致水平滾動條出現，則可以解決此問題。