1

グレースケール jquery プラグインを使用して、オンザフライで画像をグレースケールしています (Andrew Pryde による)。

効果は魅力のように機能します: http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/1-test-jquery-greyScale-html5.html

しかし、私は別のjquery関数を追加しようとしています:ロールオーバー時に画像の上に情報を表示します。

関数は単独で動作しますが、プラグインでは css の問題があります。画像が浮きません: http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html

css のどこが間違っているのか教えていただけないでしょうか?

ソース コード (css、html、jquery は例で簡単に見つけることができます)。

どうもありがとうございました ！

4

2 に答える 2

1

これは、コンテナーの幅全体にまたがるブロック要素内のキャプションで画像をラップしたためです。 float親要素ではなくグレースケール画像に適用されるため、すべての画像がフローティングされていても、それらは互いに兄弟ではありません。これらは、ホバー ラッパーの兄弟です。

画像はまだフローティングされていますが、コンテナー (ラッパー) 内に単独であり、ラッパーはフローティングされていません。

JS なしでホバー キャプションを追加できます。キャプションを各.gsWrapper要素内の別の要素として追加し、ホバー時に表示されるようにスタイルを設定するだけです。

簡略化した例:

<div class="gsWrapper">
  <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets">
  <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas>

  <div class="hide-hover">test content for hover</div>
</div>

そしてスタイリング：

.hide-hover {
  position: absolute;
}

.gsWrapper:not(:hover) .hide-hover { 
  display: none;
}

このようにして、一部の画像のラッパーに対応するために他のすべてのスタイルと JS を調整することを心配する必要はありません。

その他のデモ: jQuery の slideToggle 効果を使用してキャプションを非表示/表示: http://jsbin.com/idugaw/3/edit

slideToggle 効果に純粋な CSS を使用する: http://jsbin.com/idugaw/4/edit

于 2012-10-04T21:25:04.850 に答える
0

あなたがする必要があるのは、次のコードをCSSに入れることだけだと思います

.imgHover {
  position: relative;
  display: inline-block;
}

画像ホバー div が「ブロック」として表示されているため、gsWrapper CSS よりも優れています。

于 2012-10-04T21:17:48.493 に答える