[英]How to change body background image by hovering a li element
我正在尝试完全按照本网站的主页进行操作: http : //ingrupo.net.br/
当li元素悬停时,我需要更改我的身体背景图像,并且在每个元素上也需要更改不同的图像。
PS:没必要,但是如果有人能像本网站一样帮助文本元素,它将被应用。
body { background-size: cover; }
<script> function myFunction2() { document.body.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/2000px-Color_icon_red.svg.png')"; } </script> <a href="link-to-where-you-want-to-go" onmouseover="myFunction2()">hello!</a>
这是您想要的示例,其中使用CSS设置背景样式。
试试这个https://jsfiddle.net/8k3kp6uu/
HTML
<div class="background-divs green active"></div>
<div class="background-divs blue"></div>
<div class="background-divs yellow"></div>
<ul class="links">
<li><a class="link" data-background="green" href="">green</a></li>
<li><a class="link" data-background="blue" href="">blue</a></li>
<li><a class="link" data-background="yellow" href="">yellow</a></li>
</ul>
CSS
.background-divs {
width: 100vw;
height: 100vh;
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
left: 0;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.background-divs.blue {
background-color: blue;
}
.background-divs.green {
background-color: green;
}
.background-divs.yellow {
background-color: yellow;
}
.links {
position: absolute;
top: 0;
left:0;
z-index: 5;
}
.links li {
border: 1px solid white;
color: white;
margin: 30px 0;
padding: 10px;
}
.active {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS
$('.link').mouseover(function(e) {
e.preventDefault();
var color = $(this).attr('data-background');
$('.background-divs').removeClass('active');
$('.background-divs.'+color).addClass('active');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.