2枚の写真がお互いに配置されています。ホバーに1つを表示します。可能なCSSまたはJavaScriptのみ？

Question

私がしたいのは、ホバー上の一番上の写真（visibility：hiddenに設定されています）を表示することです。私は2つの写真は、次のように互いの上に配置されている：

<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を介して第2のフォト：

.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の男ではないので、いくつかのヒントを与えてください。ありがとう！

Answer 1

あなたはこれが不可能な場合は、背景があなたのhtml内のスタイル属性

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

Answer 2

親コンテナに：hoverクラスを置く必要があります。 CSSは、ツリーの "上に"しか流れないようにします。

.boxwrapper { 
    display: none; 
} 

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