如何懸停在CSS

Question

我得到一個400像素x 685px的圖像。在網站中，我設置它只會顯示200px x 685px。我想知道當鼠標懸停在圖像上並顯示圖像的另一半200px x 685px到400px x 685px時，如何顯示整個圖像？謝謝

Answer 1

我認爲一個可以接受的解決方案是在你的html中創建一個div。在你的樣式表（aka-css文件）中，你應該用width：200px，height：685px;接下來你要做的就是設置所有的div標籤（或者你給這個傢伙的任何id）一個background-image：url（「whatever.png」）; 現在，您還應該使用background-position：right（或左邊，您的選擇）。 到目前爲止還會發生什麼？你的div將顯示一半的圖像。 現在你應該使用div：hover作爲一套新的規則在你的CSS中，並且還使用background-position：left/right（你沒有使用的那個）。

告訴我，如果它的工作。

Answer 2

因此，我認爲你的CSS的一部分也可以是這樣的：

.your-class { 
    background: url("[the path of your image]"); 
    background-size: 200px 685px; 
} 

然後當鼠標懸停在圖片：

.your-class:hover { 
     background-size: 400px 685px; 
} 

請注意，如果您使用的<img>標籤本身在你的.html文件中，你應該寫寬度和高度而不是背景大小。無論如何，上面的代碼在某些方面是開發人員在這種情況下在CSS中做的。但顯然這取決於你如何用div標籤來構建HTML，以及你給這些標籤的類。

Answer 3

您可以通過設置實現

.selector:hover 
    { 
    background-size: 100% 100%; 
}