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

Question

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

私がしたいのは、ホバー上のトップ写真（表示：非表示に設定されている）を表示することです。私はこのようにお互いに位置する2枚の写真を持っています：

<div class="frame">
 
<div class="boxwrapper" style="visibility: hidden;"></div>
</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の男ではないので、いくつかのヒントを与えてください。ありがとう！

1

追加された 27 10月 2011 〜で 05:40 著者 user1016695

ビュー: 41

源

ro ru fr es pt de hi bn ar kk uz be uk

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");
}

これが不可能な場合は、html内のスタイル属性を背景として追加することができます

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

2

追加された 27 10月 2011 〜で 05:44 著者 Benjamin Udink ten Cate

源

ありがとう。助けられた。

追加された 28 10月 2011 〜で 09:21, 著者 user1016695, 源

著者 Marc B · Answer 1 · 2011-10-27T05:43Z

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

.boxwrapper {
    display: none;
}

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