我是新手,希望得到一些帮助。我希望在您悬停其中一个链接后保留背景。出现时是否可以在背景上进行淡入淡出/过渡?
$(document).ready(function() {
$('#change').hover(function() {
$('body').css('background-image', 'url("http://i.imgur.com/cyxXVpT.jpg")');
}, function() {
$('body').css('background', '');
});
$('#change2').hover(function() {
$('body').css('background-image', 'url("http://i.imgur.com/5MupbQ2.jpg")');
}, function() {
$('body').css('background', '');
});
});
body {
background-repeat: repeat;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="change">Change</a>
<br>
<a href="#" id="change2">Change2 </a>
最佳答案
如果你想让背景留下来,只用mouseenter事件就可以了
$('#change').on('mouseenter', function() {
$('body').css('background-image', 'url("http://i.imgur.com/cyxXVpT.jpg")');
});
如果你想要淡化背景,你可以使用css transitions
-webkit-transition: background ease-in 1s;
-moz-transition: background ease-in 1s;
-o-transition: background ease-in 1s;
transition: background ease-in 1s;
关于javascript - 悬停时更改背景图像并保持事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632105/