两张照片相互对置。悬停显示一个。可以使用css还是只使用javascript？

我想做的是在悬停状态下显示顶部照片（设置为可见性：隐藏）。我有两张照片，像这样相互定位：

<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吗？已尝试（以及其他几个选项）：

---

但它不起作用。或者这只能通过javascript实现？如果是的话，请给我一些提示，因为我不太喜欢javascript。谢谢

您必须将：hover类放在父容器上。CSS不允许这些东西“向上”树，只允许向下

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}

---

您必须将：hover类放在父容器上。CSS不允许这些东西“向上”树，只允许向下

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}

---

您可以将照片设置为

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> 

---

您可以将照片设置为

包装盒的背景

.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>