更改菜單懸停上的網站背景圖片

我一直在儘可能多地發佈帖子，但我找不到解決方案。由於您只能影響子類/ ID，CSS不太可能是因爲嵌套需求。更改菜單懸停上的網站背景圖片

這是我需要的... 我需要我的主導航到位。每個導航按鈕都有自己的類。將鼠標懸停在菜單項上時，主站點背景（body bg）將需要更改。

我相信這可以用JQuery來完成，但我甚至不知道甚至開始。

例子：

Menu Item 1 (class - .menu-item-1)

對從#fff.menu-item-1

變身背景Hover到

body{background-image: url('yadayadayada.jpg');}

然後......當懸停影響是結束了...回去變白。

來源

2013-09-10 guynumber6

使用jQuery，嘗試

jQuery(function(){ 
    var $body = $('body'); 
    $('.menu-item-1').hover(function(){ 
     $body.css('background-image', 'url("yadayadayada.jpg")') 
    }, function() { 
     $body.css('background-image', '') 
    }) 
})

演示：Fiddle

來源

2013-09-10 22:46:20

爲什麼你使用'變量$身體= $（ '身體'）;'而不是調用$（ '身體'）爲正常？ –

@AhmadAnas由於該對象可能被多次使用，因此它被緩存 –

我希望這是你正在尋找的東西。我的方法如下：

1）使兩個div（即.bg1和.bg2）的寬度和高度覆蓋整個頁面以及兩個不同的背景。

2）做了第三個內容。

3）得到的z-index：0至內含div背景和z指數：2至內容的div

JSFiddle : Demo

HTML

<span class="bg bg1 hide"></span> 
<span class="bg bg2 hide"></span> 
<div class="content"> 
<ul> 
    <li class="menu-item-1">Item 1</li> 
    <li class="menu-item-2">Item 2</li> 
</ul> 
</div>

CSS

body 
{ 
    margin:0%; 
    width:100%; 
    height:100%; 
} 

.content 
{ 
    position:absolute; 
    left:0%; 
    top:0%; 
    margin:0%; 
    height:100%; 
    width:100%; 
    overflow:auto; 
    display:block; 
    z-index:2; 
} 

.bg 
{ 
    position:fixed; 
    top:0%; 
    left:0%; 
    height:100%; 
    width:100%; 
    margin:0%; 
    z-index:0; 
} 

.bg1 
{ 
    display:block; 
    background:url(http://mooxidesign.com/wp-content/uploads/2014/04/Free-Polygonal-Low-Poly-Background-2.png) no-repeat; 
     background-size:cover; 
} 

.bg2 
{ 
    display:block; 
    background:url(http://s3-us-west-2.amazonaws.com/i.cdpn.io/58345.EFlLy.3e949596209919be54cb61f243defd4b.png) no-repeat; 
     background-size:cover; 
} 

.hide{display:none;}

的JavaScript

jQuery(function(){ 
    $('.menu-item-1').hover(function(){ 
     $(".bg1").fadeIn(); 
    }, function() { 
     $(".bg1").fadeOut(); 
    }) 
    $('.menu-item-2').hover(function(){ 
     $(".bg2").fadeIn(); 
    }, function() { 
     $(".bg2").fadeOut(); 
    }) 
})

來源

2015-05-12 20:18:21 divy3993

更改菜單懸停上的網站背景圖片

回答

相關問題