纯 CSS：悬停时在 image1 上方/上方/顶部显示 image2答案

【问题标题】：Pure CSS: Show image2 above/over/on top image1 on hover纯 CSS：悬停时在 image1 上方/上方/顶部显示 image2
【发布时间】：2014-01-04 18:24:49
【问题描述】：

SOLVED FIDDLE：

我不知道如何在悬停时在当前可见图像（一个）上方/上方显示图像（两个）。

HTML：

<img class="two" src="img/2.png" alt="bulb">
<img class="one" src="img/1.png" alt="me">

CSS：

.one {
display: block;
margin: 0 auto;
padding-top: 50px;
}

.two {
opacity: 0;
}

.one:hover .two {
opacity: 1;
}

我做错了什么？

【问题讨论】：

试试.one:hover+.two而不是.one:hover .two

标签： html css image hover

【解决方案1】：

编辑：如果您想在第一张图片下方显示另一张图片，则需要更改 DOM，因为 CSS 无法选择上一个元素，但它可以选择相邻的图片，您使用的是 .one:hover .two 这将选择一个类.two的元素嵌套在hover上的类.one的元素下，但由于元素是相邻的，您可以使用下面的选择器，但请注意您需要更改DOM中的元素顺序。

.one:hover + .two {
    opacity: 1;
}

Demo

我假设 Above 表示悬停时您想要交换图像，所以如果您想要交换图像，则可以通过将图像设置为嵌套在 position: relative; 容器下的 position: absolute; 来使用 CSS 定位技术.

Demo

div {
    position: relative;
}

div img { /* Setting images to absolute */
    position: absolute;
    top: 0;
}

div img:nth-of-type(2) { /* Initially hiding image 2 */
    opacity: 0;
}

div:hover img:nth-of-type(1) { /* On hover of div we hide 1st image */
    opacity: 0;
}

div:hover img:nth-of-type(2) { /* On hover of div we show 2nd image */
    opacity: 1;
}

您还可以添加transition属性以平滑交换hover上的图像

Demo

div img {
    position: absolute;
    top: 0;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

【讨论】：

感谢您的帮助！这就是我上面的意思：jsfiddle.net/3m393我使用了你的“下图”方法并将其设置为顶部。我希望这是最聪明的方法:)
@user3109752 是的，我们可以很好地利用那里的定位:) 欢迎您..
@user3109752 顺便说一句，如果你将图像包裹在position: relative; parent 中，而不是使用position 第二张图像position: absolute; 包裹会更好

【解决方案2】：

如果您的哪一张图片先出现并不重要，您可以像这样更改您的 html：

<img class="one" src="img/1.png" alt="me">
<img class="two" src="img/2.png" alt="bulb">

并使用这个 CSS：

img.one:hover + img.two {
opacity: 1;
}

因为 CSS 中没有倒退。

【讨论】：

【解决方案3】：

尝试使用position:absolute 并使用div 包装您的图像

div.images{
  border:solid green 4px;
  height:120px;
  width:120px;;
  margin-top: 50px;
  position:relative;
}
.images img{
  position:absolute;
  top:0;
  left:0
}
.two {    
  opacity:0;
  z-index:1;
}

.images:hover .two {
  opacity: 10;    
}

DEMO

【讨论】：