当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

回答

相关问题