两张照片放在一起.显示一个悬停.可能与css或只有javascript

Two photos positioned on each other. Show one on hover. Possible with css or only javascript?

本文关键字：css javascript 悬停 两张 照片 显示 在一起 一个      更新时间：2023-09-26

我想做的是在悬停时显示顶部照片(设置为可见性:隐藏)。我有两张照片像这样放在一起:

<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a> 
<a href="http://www.mylink.com"><div class="boxwrapper" style="visibility: hidden;"></div></a>
</div>

通过css:

添加第二张照片
.boxwrapper {
 background: url("../img/boxPlus.gif"); 
 position: relative;
 width: 300px;
 height: 178px;
 left: -6px;
 top: -184px;
 z-index: 1000;
}

可以用css做吗?已尝试(和其他几个选项):

 #frame img:hover .boxwrapper {
      visibility: visible;
    }

但它不起作用。或者这只可能与javascript?如果是，请给一些提示，因为我不是太多的javascript家伙。谢谢!

您可以将照片设置为boxwrapper的背景

.boxwrapper{
  background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
  background: url("../img/portfolio/default1.jpg");
}

如果这是不可能的，你可以添加它作为背景通过一个样式属性在你的html

<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>

您必须将:hover类放在父容器上。CSS不允许这样的东西"向上"滴入树中，只允许向下滴入。

.boxwrapper {
    display: none;
}
.frame:hover .boxwrapper {
    display: block;
}
相关文章：