Question

我无法弄清楚如何在悬停时在当前可见图像上方/上方显示图像（两个）。

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;
}

我做错了什么？

Answer 1

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

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

Demo

我假设上面意味着在悬停时你想要交换图像，所以如果这是你想要的，而不是使用CSS定位技术，将图像设置为嵌套在{position: absolute;下的position: relative; 1}}容器。

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;
}

Answer 2

尝试使用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

Answer 3

如果您的哪一张图片首先出现并不重要，您可以像这样更改您的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中没有后退。

纯CSS：在悬停时在top image1上方/上方/上方显示image2

3 个答案: