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

Posted 2023-03-05

【中文标题】纯 CSS：悬停时在 image1 上方/上方/顶部显示 image2

【英文标题】：Pure CSS: Show image2 above/over/on top image1 on hover

【发布时间】：2014-01-04 18:24:49

【问题描述】：

SOLVED FIDDLE：

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

html：

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

CSS：

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


.two 
opacity: 0;


.one:hover .two 
opacity: 1;

我做错了什么？

【问题讨论】：

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

【参考方案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" >
<img class="two" src="img/2.png" >

并使用这个 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