两张照片互相定位。 在悬停时显示一个。 可能与CSS或只有JavaScript？

Question

What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:

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

Added the second photo through css:

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

Is it possible to do with css? Tried (and several more options):

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

But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!

Answer 1

You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.

.boxwrapper {
    display: none;
}

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

Answer 2

You could set the photo as background of the boxwrapper

.boxwrapper{
  background: url("../img/boxPlus.gif");
}

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

if this is not possible you could add it as background trough a style attribute inside your html

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