Question

我对这一切都很陌生，希望得到一些帮助。我希望在你悬停其中一个链接后留下背景。出现时还可以在背景上进行淡入淡出/过渡吗？

＆＃13;

$(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', '');
    });
});

＆＃13;

body {
    background-repeat: repeat;
    background-size:cover;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您希望保留背景，请仅使用mouseenter事件

$('#change').on('mouseenter', function() {
    $('body').css('background-image', 'url("http://i.imgur.com/cyxXVpT.jpg")');
});

如果您想要淡化背景，可以使用css过渡

-webkit-transition: background ease-in 1s;
-moz-transition: background ease-in 1s;
-o-transition: background ease-in 1s;
transition: background ease-in 1s;

FIDDLE

Answer 2

如果你想保持背景，请不要使用悬停功能的第二个参数结束的第一个参数是当你悬停对象而第二个参数模糊时。 https://api.jquery.com/hover/ 可以使用动画功能淡入淡出 https://api.jquery.com/animate/

编辑：或像阿德内诺那样的css过渡说

在悬停时更改背景图像并保持活动状态

2 个答案: