使css，css3或jquery懸停的背景相似

我試圖實現的是當我將鼠標懸停在href上時，整個頁面的背景不透明。徘徊的東西會觸發身體課以具有不透明度的彩色背景。就像下面這樣，但是這不起作用。我只能讓它在其包含的div內工作。使css，css3或jquery懸停的背景相似

是否有一個更簡單的方法與css或css3。它必須是一個輕量級的方法來實現這一點。我也想在圖片的中心放置圖片。然而，這個功能目前更重要。

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

來源

2012-07-21 user1074541

我可能不能完全理解你想要什麼來實現，但爲什麼不只是有一個的div的寬度和高度設置爲100％和50％opcaity和顯示：無默認。當一個href被徘徊時，使該div可見。我不知道一個建議 – 2012-07-21 15:55:24

這可能是一個選項。我會玩一玩。 – user1074541 2012-07-21 16:00:32

但是你想這樣做的身體背景？我不認爲它會起作用，因爲身體背景沒有背景（它下面的另一層）。正如你所說，使用div可以正常工作。那麼，爲什麼不創建一個div並將其用作整個身體內容的容器，並在其中執行動畫？

喜歡的東西：

<body> 
    <div id="divToAnimate"> 
     <!-- your content here... --> 
    </div> 
</body>

來源

2012-07-21 16:00:52 davidbuzatto

這可能是原因。我會放棄這一點。我確信它可以在身體或身體課程中發揮作用。 – user1074541 2012-07-21 16:09:32

也許是這樣的：

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

這需要你有，並適當引用jQuery庫，並會發生什麼，除非它是可訪問的。沒有它可能看起來很有趣。

如果你想操縱的div有一個id使用'＃'，如果它有一個類使用'。'

來源

2012-07-21 16:38:40 Dom

經過多次實驗並通過互聯網搜索後，我發現一個基於css和jQuery的nice solution。如果您將一個額外的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：在HTML

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

例如集成：

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

Full test script is here。

來源

2012-07-21 17:44:59 Stano

我爲你創造了一個不錯的起點。我用透明的div來掩蓋你的背景。當您懸停某些具體內容時，疊加層的不透明度將會改變。

*我使用.stop（）方法來阻止多個懸停的隊列。

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

來源

2012-07-21 18:39:28 WarrenBee

使css，css3或jquery懸停的背景相似

回答

相關問題