如何在 CSS 中悬停

Question

我得到了一张 400 像素 x 685 像素的图片。在网站上，我设置它只会显示 200px x 685px。我想知道当鼠标悬停图像时如何显示整个图像并显示图像的另一半 200px x 685px 到 400px x 685px？谢谢

Answer 1

所以我认为你的 css 的一部分可能看起来像：

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

然后当鼠标悬停图像时：

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

请注意，如果您在 .html 文件中使用 <img> 标记本身，那么您应该编写宽度和高度而不是背景大小。无论如何，在这种情况下，上面的代码在某种程度上是开发人员在 css 中所做的。但显然，这实际上取决于您如何使用 div 标签构建 HTML 以及您为这些标签提供的类。

Answer 2

你通过设置实现

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

Answer 3

我认为一个可接受的解决方案是在您的 html 中创建一个 div。在您的样式表（又名 - css 文件）中，您应该使用 width:200px, height:685px; 来定义它。接下来你要做的是设置所有 div 标签（或你给这个家伙的任何 id）一个 background-image:url("whatever.png"); 现在，您还应该使用背景位置：右（或左，您的选择）。 到目前为止会发生什么？您的 div 将显示一半图像。 现在你应该在你的 CSS 中使用 div:hover 作为一组新规则，并且还使用 background-position:left/right （你没有使用的那个）。

告诉我它是否有效。