如何在 CSS 中悬停

Question

我得到了一个 400px x 685px 的图像。在网站中，我设置它只显示 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）a

background-image:url("whatever.png")

; 现在，您还应该使用

background-position:right (or left, your choice)

。

到目前为止会发生什么？你的 div 将显示半张图像。 现在你应该在你的CSS中使用div:hover作为一组新的规则，并且还使用background-position:left/right（你没有使用的那个）。

告诉我是否有效。