0

私が達成しようとしているのは、href にカーソルを合わせたときに、ページ全体の背景を不透明にすることです。ホバリングすると、body クラスが不透明な色付きの背景を持つようにトリガーするもの。以下のようなものですが、これは機能しません。含まれているdiv内でのみ機能させることができます。

css または css3 を使用した簡単な方法はありますか。これを達成するには、軽量の方法である必要があります。また、ページの中央に画像を配置したいと考えています。ただし、現時点では、この機能の方が重要です。

 $(function(){
$('a body').hover(function() { 
$('a', this).stop().animate({"opacity": 1}); 
 },function() { 
$('a', this).stop().animate({"opacity": 0.4}); 
});
4

4 に答える 4

1

しかし、これを体の背景でやりたいですか？体の背景には背景がないため（その下に別のレイヤーがあるため）、うまくいかないと思います。あなたが言ったように、divを使用すると適切に機能します。では、div を作成し、それを本体コンテンツ全体のコンテナーとして使用して、その中でアニメーションを実行してみませんか?

何かのようなもの：

<body>
    <div id="divToAnimate">
        <!-- your content here... -->
    </div>
</body>
于 2012-07-21T16:00:52.473 に答える
0

私はあなたのための素晴らしい出発点として何かを作成しました. 背景を覆うために透明な div を使用しました。特定のものにカーソルを合わせると、オーバーレイの不透明度が変化します。

* .stop() メソッドを使用して、キューが複数ホバーしないようにしました。

http://jsfiddle.net/WarrenBee/88ry6/1/

于 2012-07-21T18:39:28.880 に答える
0

たぶん次のようなもの：

$("a").hover{
$("#div-that-covers-the-area-you-wish-to-change").css({"background":"#fff"});
});

これには、jQuery ライブラリを含めて適切に参照する必要があり、アクセス可能でなければ何も起こりません。それがなくても面白く見えるかもしれません。

操作する div に id がある場合は「#」を使用し、クラスがある場合は「.」を使用します。

于 2012-07-21T16:38:40.493 に答える
0

多くの実験とインターネットでの検索の後、css と jQuery に基づいた1 つの優れたソリューションを見つけました。body に追加の div を 1 つ追加すると、ページの不透明な背景のように動作する可能性があります。div は次のスタイルを使用します。

CSS:

.background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA0SURBVBhXY/wPBA6eZxnQwYHtxgyM9h5n/oMkQBwYgClmQpdA5oMlcQHCkugOgvEZ8bkWAHInGVYp48cTAAAAAElFTkSuQmCC);
   /* These three lines are for transparency in all browsers. */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity:.5;
}

JavaScript:

$(document).ready(function () {
  $('a').hover(function(){
    $('.background').css('opacity',0.2);
  }, function(){
    $('.background').css('opacity','');
  });
});

HTML での統合の例:

<body>
<div class="content">Content<a href="">Link</a></div>
<div class="background"></div>
</body>

完全なテスト スクリプトはこちらです。

于 2012-07-21T17:44:59.683 に答える