3

かなり単純なようですが、動作させることができません。

divには、Facebook/Twitterのリンクが含まれています。それが機能する方法は、画像が表示され、誰かがその画像にカーソルを合わせると、画像が消えてソーシャルアイコンに置き換わるというものです。

div内のテキストを処理するコードがありますが、画像/スクリプトを追加するとすぐに壊れてしまうようです。（私が持っているコードでも画像が消えることはありません。それは私がその方法を理解していないことです）。

これが私が持っているものです：

<div class="image">
<img src="/some_image.jpg">

<div class="sharerDiv">
<p>Hello!</p>
</div>
</div>

次のCSSを使用します。

.sharerDiv {
display:none;
}
img:hover + .sharerDiv {
display:block;
}

これはjsfiddleにあります：http：//jsfiddle.net/randomlysid/dxwma/1/

可能であればcssでこれを実行したいのですが、それは私がよく知っていることですが、jQueryがそれを実行する唯一の方法である場合は、それも機能します。

ありがとう！

4

3 に答える 3

3

親コンテナを適用し、疑似セレクタ:hoverを追加して、その子を次のように変更できます。

HTML

<div id="social">
  <div class="image">
    <img src="http://lorempixum.com/80/80" />
        <div class="sharerDiv">
        <p>Hello!</p>
        </div>
  </div>
</div>

CSS

#social {
  width: 100px;
  height: 200px;
}

#social:hover img {
  display: none;
}

#social:hover .sharerDiv {
  display: block;
}

にカーソルを合わせると、ビューからdiv#social削除imgされ、テキストのみが表示されます。

アップデート

以下の同じ CSS を使用して、ケース 1 に同じタイプの親要素を適用しましたが、期待どおりに動作するようです。これが私のjsfiddleです：http://jsfiddle.net/dxwma/18/

于 2013-01-16T14:18:37.557 に答える
1

CSS を次のように変更します。

.image
{
  width: 80px;
  height: 80px;
}
.sharerDiv
{
  display: none;
  position: absolute;
  z-index: 99;
}
img
{
  position: relative;
  display: block;
}
.image:hover .sharerDiv
{
  display: block;
}
.image:hover img
{
  display: none;
}
  1. 外側のコンテナー .image の境界 (幅と高さ) は同じにする必要があります。
  2. .sharerDiv の位置の値は絶対値にする必要があります (フロートできるようにするため)。
  3. ホバーは外側のコンテナに適用する必要があります。

これは、 jsFiddleのコードの編集されたフォークです。

于 2013-01-16T14:43:17.267 に答える
0

負のマージンを追加する必要があります。およびその他のdiv。たとえば、コードを次のように変更します。

html:

<div class="image">
  <div class="image-container">
    <img src="http://lorempixum.com/80/80">
  </div>
  <div class="sharerDiv">
  <p>Hello!</p>

    </div>

</div>

CSS:

.sharerDiv{
  display:none;
}
.image-container{
  width: 80px;
  height: 80px;
}
.image-container:hover + .sharerDiv{
  display:block;
  margin-top: -49px;
}
.image-container:hover img{
  visibility: hidden;
}
于 2013-01-16T14:11:50.517 に答える