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

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

<div class="frame">
Title Here 
<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

2 答え

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

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}
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
追加された
ありがとう。助けられた。
追加された 著者 user1016695,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript