3

position:absolutecanvas タグの上に divがあります。div はホバー疑似クラスを使用して設定overflow:visibleし、単純なポップアップ タイプの効果を作成します。Chrome では、これで問題なく動作します。IE10 では、div 内の要素にカーソルを合わせたとき、または div に a を指定した場合にのみ、ホバー疑似クラスがアクティブになりbackground-colorます。

どんな助けでも大歓迎です！

4

3 に答える 3

4

これは、背景画像として透明な png を使用することで修正できるようです。

編集：申し訳ありませんが、これをさらに拡張する必要があります。:hoverつまり、透明な背景色を持つ要素での疑似クラスを使用する場合、ホバーは、マウスがソリ​​ッド/非透明スポット上にある場合にのみトリガーされます。次のようなことをしない限り、これは通常問題になりません。

<style>
#content {
  height:20px;
  overflow:hidden;
  position:absolute;
  width:100px;
}
#content:hover {
  height:100px;
  overflow:visible;
}
#hoverContent {
  position:absolute;
  top:20px;
}
</style>
<div id="content">
    <div style="float:left;">wtf</div>
    <div style="float:right;">hrm</div>
    <div id="hoverContent">lol</div>
</div>

つまり、#contentにカーソルを合わせると、マウスが 'wtf' または 'hrm' の上にある場合にのみ、オーバーフロー コンテンツが表示されます。「wtf」と「hrm」という単語の間にホバーすると、ホバー スタイルも適用されると予想されますが、それは一部であるためです#content。

これを修正するには、背景色または画像を に適用します#content。

于 2013-06-05T19:17:41.230 に答える
1

また、背景イメージとしてインライン svg を使用することも 1 つの可能性です。背景が1x1のsvg要素のみが必要です-色はありません。

  • 長所 - 追加のリクエストは不要

  • 短所 - IE8 は svg をサポートしていません

    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%221%22+height%3D%221%22+viewBox%3D%220+0+1+1%22%3E%3Ctitle%3Etransparent+bcg%3C%2Ftitle%3E%3C%2Fsvg%3E");
background-repeat: repeat;

サンプルは、すべてのブラウザで動作するようにエンコード済みの svg です

于 2015-08-19T12:14:18.227 に答える
1

より良い解決策は、画像ではなく透明な背景色を使用することです。

background:rgba(0,0,0,0);

IE10 は rgba() を単色として扱います。

于 2013-07-10T15:19:36.683 に答える