當div被js徘徊時更改背景URL

我想要做的是當列表項目懸停時，交換背景圖像。當div被js徘徊時更改背景URL

我一直在試圖讓.remove和.append工作，但我正在圍繞着試圖定位正確的東西並獲得正確的語法！是否有人能夠伸出援助之手？

CSS：

<div class="splash"> 
    <div class="main_nav"> 
     <ul> 
     <li class="main_headings" id="mainUK"><a href="/UK">The UK</a></li> 
     <li class="main_headings" id="mainJapan"><a href="/Japan">Japan</a></li> 
     <li class="main_headings" id="mainChina"><a href="/China">China</a></li> 
     <li class="main_headings" id="mainHK"><a href="/HK">Hong Kong</a></li> 
     <li class="main_headings" id="mainMalaysia"><a href="/Malaysia">Malaysia</a></li> 
     </ul> 
    </div> 
    </div>

HTML：

.splash { 
    background: url(Assets/Images/Splash/UK.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:100%; 
    height:100%; 
    position:fixed; 
}

其他圖像位於不同的名字相同的文件夾。謝謝！

來源

2017-04-21 Scott

您可以使用jQuery修改容器的CSS。這將是這個樣子：

$(".main_headings").hover(function() { 
 
    $(this).closest(".splash").css('background-image', 'url("http://placehold.it/600x400/3366ff/000000")'); 
 
});

.splash { 
 
    background: url("http://placehold.it/600x400/ff3366/000000") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="splash"> 
 
    <div class="main_nav"> 
 
    <ul> 
 
     <li class="main_headings" id="mainUK"><a href="/UK">The UK</a></li> 
 
     <li class="main_headings" id="mainJapan"><a href="/Japan">Japan</a></li> 
 
     <li class="main_headings" id="mainChina"><a href="/China">China</a></li> 
 
     <li class="main_headings" id="mainHK"><a href="/HK">Hong Kong</a></li> 
 
     <li class="main_headings" id="mainMalaysia"><a href="/Malaysia">Malaysia</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

這是非常基本的...它只是說明如何實現從jQuery的背景圖像屬性。我假設你想要更具體一些（即，使用不同的LI具有不同的圖像，並且可能將背景圖像設置爲鼠標懸停時的原始圖像），但是這應該讓您開始。

來源

2017-04-21 17:29:47 Redit0

這看起來像它應該工作，但我沒有得到任何東西。我的代碼如下所示： $（文件）。就緒（函數（）{ //換出BG懸停 $（ '＃mainJapan'）懸停（函數（）{$ （本）.closest （'.splash'）.css（「background」，「url（Assets/Images/Splash/Japan.jpg）no-repeat center center fixed;」）; }）; }）; 原始背景是否有可能覆蓋懸停或其他東西？還是懸停需要採取第二個函數，告訴它返回到原始圖像？ – Scott

我改變了我的答案，使用一個片段，以便您可以看到它的工作。我也讓jquery/css稍微簡單一點 - 我認爲讓整個背景速記在那裏搞亂了它。 – Redit0

你可以看看這個例子。

http://jsfiddle.net/F2Z9Z/5/

#menu ul li a:hover 
{ 
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

參考。

Change background image on hover

來源

2017-04-21 17:33:29

除非我失去了一些東西，這個問題是我需要改變的.splash圖像，而不是列表項目的BG。 – Scott

你可以在jsfiddle中發送代碼，所以我可以看看。 –

在我的示例代碼

我用jQuery來改變的mouseenter和鼠標移開的CSS背景圖像值：

$('.splash a').mouseenter(function() { 
 
    $('.splash').css("background-image", "url(http://placehold.it/500x350/bf1)"); 
 
}); 
 
$('.splash a').mouseout(function() { 
 
    $('.splash').css("background-image", "url(http://placehold.it/499x349/fb7)"); 
 
});

.splash { 
 
    background-image: url(http://placehold.it/500x350/fb7); 
 
    background-repeat: no-repeat, 
 
    background-position: center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="splash"> 
 
    <div class="main_nav"> 
 
     <ul> 
 
     <li class="main_headings" id="mainUK"><a href="/UK">The UK</a></li> 
 
     <li class="main_headings" id="mainJapan"><a href="/Japan">Japan</a></li> 
 
     <li class="main_headings" id="mainChina"><a href="/China">China</a></li> 
 
     <li class="main_headings" id="mainHK"><a href="/HK">Hong Kong</a></li> 
 
     <li class="main_headings" id="mainMalaysia"><a href="/Malaysia">Malaysia</a></li> 
 
     </ul> 
 
    </div> 
 
    </div>

來源

2017-04-23 23:42:14 Johannes

當div被js徘徊時更改背景URL

回答

相關問題