0

次の HTML を検討してください。

<div id="mydiv">Big shiny error goes here</div>

以下の CSS を使用するdivと、ページがスクロールされても、これは右上隅に固定されます。

#mydiv {
  position:fixed;
  right:0;
  top:0;
  background-color: red;
}

たとえば、ホバー時に不透明度の 10%までmydivフェードアウトし、ユーザーがテキストの選択やクリップボードへのコピーなど、その下のページ要素を使用できるようにすることは可能ですか? アイデアはmydiv常に表示されたままにする必要がありますが、ユーザーのアクションをブロックするべきではありません。

mydiv追加のボーナスとして、下に要素が見つからない場合は、 のテキストを選択するとよいでしょう。

編集: hover +z-indexアプローチがうまくいかないようです。この jsfiddle を参照してください。

4

2 に答える 2

1

私が考えることができる最も近いのは、コンテンツ領域z-indexに 1 を与えることです。次に、 を使用し:hoverてエラー div を低くz-indexし、メイン領域の後ろに配置します。これにより、メイン コンテンツでのマウス イベントが許可されます。必要に応じて不透明度を調整してフェードアウトすることもできます。IEでは、要素の前に他に何もない場合、要素をクリック/ドラッグ/何でもできると思いますが、ChromeとFirefoxは、実際には「何も」ない場合でも、コンテンツ領域に隠されていると見なします。

于 2013-04-25T00:01:20.760 に答える
0 
$(document).ready(function(){
  var id = $('#selector')
  id.mouseover(function(){
    id.fadeOut(800,function(){
      id.hide();
    });
  })
  id.mouseout(function(){
    id.fadeIn(800,function(){

    });
  })
});

セレクターは上の部門を指す必要があります

于 2013-04-25T14:03:34.540 に答える