gpt4 book ai didi

javascript - 当 div 与 js 悬停时更改背景 url

转载 作者:行者123 更新时间:2023-11-28 03:54:30 24 4
gpt4 key购买 nike

我想做的是在悬停列表项时切换背景图像。

我一直在努力让 .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;
}

其他图像位于同一文件夹中,但名称不同。谢谢!

最佳答案

您可以使用 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,并且可能在鼠标移出时将背景图像设置回原始图像),但这应该让您开始。

关于javascript - 当 div 与 js 悬停时更改背景 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43548711/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com