如何悬停在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%; 
}