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 内容的容器并在其中制作动画呢？

就像是：

<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 的不错的解决方案。如果您将一个额外的 div 附加到正文，那么它的行为就像您的页面的不透明背景一样。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 回答