Question

我的问题是我有2张图片； #two最初是隐藏的。

仅CSS（没有JS）中有任何方法，因此当我将鼠标悬停在#one上并显示#two时，可以使用某些动画

#two{
    display:none;
}
#one:hover + #two{
    display: block;
}

<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

PS：我正在使用Google Chrome扩展程序

编辑：有一个想法是使用图像的background-image : url()并在悬停时对其进行更改，但是我不想要它，因为它不起作用，它需要提供完整的chrome扩展路径，包括扩展ID < / p>

Answer 1

@ATomCalledStu仅给出了CSS答案，但这仅在具有相对包装器的情况下有效。

对于任何包装器来说，更好的方法是在包装器上设置:hover：

.wrapper, img {
  display:inline-block;
}
#two {
  display:none;
}
.wrapper:hover #two {
  display: inline-block;
}
.wrapper:hover #one {
  display: none;
}

<div class="wrapper">
  <img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

  <img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>
</div>

如果您更改某人的网站，则可能会看到图像很可能具有包装元素（div，span等），并使用该元素来设置:hover选择器。

我通常要避免使用position:absolute，除非我绝对确定该行为绝不依赖于相对位置。在这种情况下，尤其是因为我不知道您的页面是什么样子，absolute无法正常工作的可能性似乎很大。

更新：

如果您想要动画，最好使用position:absolute作为上一个建议的答案。抱歉造成混乱；）

Answer 2

您可以将它们放置在绝对位置上，然后在悬停时降低顶部图像的不透明度，如下所示：

img {
  position:absolute;
  top:0;
  left:0;
  transition:all .6s ease;
}
#one {
  z-index:20;
}
#one:hover {
  opacity:0;
}

这是一个有效的示例：https://jsfiddle.net/pksjg76x/

在这种情况下，您不能使用display:none，因为您需要将top元素保留在文档中才能使用hover属性。更改不透明度可能是您最好的选择，只要您不需要第二张图像即可查看以外就没有其他功能。

您还可以在这里非常容易地使用动画属性。

Answer 3

这是带有动画的完整解决方案：

您将它们都设置为position: absolute，并且body是position: relative（或您拥有的任何容器）。

然后将display: block;设置为opacity: 0;，将其设置为隐藏的。在隐藏元素上的CSS上设置过渡，并在将第二个元素悬停时设置相同的opacity: 1;。你很好去：

#two {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0;
  transition: all 1s linear;
}

#one {
  position: absolute;
  z-index: 0;
}

#one:hover+#two,
#two:hover {
  opacity: 1;
}

body {
  position: relative;
}

<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

是否可以仅使用CSS隐藏悬停的图像并显示其他图像？

3 个答案: