19

子divが含まれているdivがあります。私はjQueryを使用して、マウスが親divにカーソルを合わせるたびに子divを表示/非表示にします（親divはページの下部全体に広がります。幅：100％、高さ100px）。親divがページ上にあることを確認するために、firebugと開発者ツールバーの両方を使用しました。

ChromeとFireFoxの両方で空の親divにカーソルを合わせると、すべて正常に機能します。IEでは、カーソルを合わせるために、内部にある種のテキストが必要です。divホバーイベントは、空のdivだけでは発生しません。

この問題のすべてのもっともらしい回避策はありますか？

- アップデート

すべての提案を試しましたが、まだ何も機能していません。

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

上記のhtmlは、マスターページのdivコンテナに含まれています。子divは、いくつかのホバーイン/アウトイベントでjQueryで非表示になります。親div（toolBar）は常にページに表示されます。toolBarでホバーが発生すると、子divが表示されます。

これがjQueryコードです

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn('fast');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut('fast');
  $(this).animate({ height: "50px" }, "fast");

}

最後に、ここに小さなcssがあります

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url('/images/toolbar-background.png') repeat-x; margin-right: auto; margin-left: auto; }
4

13 に答える 13

29

背景色または境界線を設定すると機能します ...

これらのいずれかを既存の外観と一致させることができれば、大丈夫です。

（背景画像は最も目立たない解決策のようです）

于 2010-01-29T00:13:08.373 に答える
15

コメントやフィルターはどれも私にはうまくいきません。divがレンダリングされることはないため、ホバーすることはできません。

究極の解決策：

.aDiv {
    background: transparent url(../images/transparent.gif) repeat;
}

1ピクセルの透明なgif画像付き。確かに動作します！

于 2011-02-07T16:03:44.450 に答える
5

質問に回答したことは知っていますが、同じ問題が発生しました。空のdivは関数を起動しません。また、境界線がある場合は、境界線自体のみが機能を開始します。私はたくさんのことを試しましたが、何も役に立ちませんでした。これが私の解決策です。ほとんど同じですが、画像を使用しなかったということだけです。これをCSSに追加します。

div {/ *要素の名前、クラス、またはIDをここに書き込みます* /
背景：#FFF; / *好きな色を選択でき、1.0-完全に見える* /
不透明度：0.0; /*IEを除くすべてのブラウザの不透明度設定*/
フィルタ：alpha（不透明度= 0）; / * IEの不透明度設定、0-透明および100-完全に表示* /
}
于 2010-08-22T00:27:40.783 に答える
2

DIVを保持したい場合、これは私のために機能しました： background-color: rgba(0,0,0,0.001);

于 2013-07-12T11:26:38.133 に答える
1

@Skateball：そのソリューションは機能しますが、FF/chromeの子要素も非表示にします。これが私の見解です：

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);
于 2011-01-06T11:38:38.643 に答える
0

ちょっとハッキーで、レイアウトが変わるかどうかはわかりませんが、いつでも&nbsp;divの中に入れることができます。

于 2010-01-29T00:00:25.357 に答える
0

「empty」要素内に空のコメントを挿入するだけです。:)

<div><!-- --></div>

これにより、IEは要素をレンダリングします

于 2010-01-29T00:11:23.810 に答える
0

要素のhasLayoutフラグを強制する必要がある可能性があります。これは、CSSプロパティzoom:1を適用することで実行できます。

于 2010-01-29T00:26:37.703 に答える
0

ある領域にdivを追跡するマウスイベントをフロートさせる最良の方法は、divを1pxの幅にし、必要な高さにすることです。次に、divに、必要な実際の幅の右側に透明な境界線を付けます。これが透明な画像よりもうまく機能する理由は、画像を使用すると、divがフォーカスを失うことなく、たとえばドラッグするために、mousemoveイベントを追跡できないためです（代わりに画像をドラッグします）。この問題は、jQueryUIスライダーまたはマウスドラッグの両方を使用してアニメーションをスクラブしたときに発生しました。これが私のコードの簡単なバージョンです。

//container div to hold the animation images this part doesn't really matter to answer the question
<div style="position:absolute; left:0px; top:0px; width:200px; height:200px">
// a bunch of images stacked like one of those animation flip books you made when you were a kid
   <img id="image01" src="blah01.jpg" />
   <img id="image02" src="blah01.jpg" />
   <img id="image03" src="blah01.jpg" />
   // and so on
</div>
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image
<div style="position:absolute; left:-1px; top:0px; width:1px; height:200px; border-right: solid 200px transparent; />

私のアプリケーションでは、2ピクセルごとにマウスを左右に動かして、他のすべてを非表示にし、アニメーションをビンゴにしながら、適切な画像の可視性を提供します。（空のdivは、IE以外のすべてのブラウザーで正常に機能しましたが、これはIEおよびIE以外で機能したため、2つの方法で記述する必要はありません。）

于 2012-01-13T00:23:16.000 に答える
0 
.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

境界線を追加したとき、ホバーイベントは、マウスが境界線の上または境界線に非常に近いときにのみ発生しましたが、境界線は必要ないので、透明な背景を使用するだけで機能します...透明な背景が私のためにトリックを行いました（コメントとnbspも機能しませんでした...）

于 2013-05-03T10:48:59.853 に答える
0

不透明度を設定してレイヤーを非表示にすることができ、背景も設定する必要があります

{
    background: white;
    opacity: 0;
}
于 2013-05-04T17:19:55.013 に答える
0

まだ「そこに」あり、スペースを取り、マウスオーバーなどのイベントを引き続き発生させる、非表示の非空白文字である「点字パターンブランク」を利用することができました。以下のスニペットはこれを示しています（divが空であるか、空白のみが含まれている場合のように、divの幅はゼロではありません）。

.notActuallyEmpty {
  background-color: gray;
  width:50px;
}
⠀⠀
<div class="notActuallyEmpty">⠀</div> <!--Unicode Character “⠀” (U+2800)--!>

于 2019-08-14T21:17:59.957 に答える
-1

IE6をサポートする必要がない場合。グラフィックプログラム（Photoshop）で、ホワイトボックスの1x1画像を作成します。不透明度を1％に下げます。PNG24またはGIFとして保存します。次に、これを透明DIVの背景画像にします。

これにより問題が処理され、子要素の不透明度が維持されます。

于 2012-03-22T18:40:04.217 に答える