javascript - 悬停时更改背景图像并保持事件状态

标签 javascript jquery html css

我是新手,希望得到一些帮助。我希望在您悬停其中一个链接后保留背景。出现时是否可以在背景上进行淡入淡出/过渡?

$(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;

FIDDLE

关于javascript - 悬停时更改背景图像并保持事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632105/

相关文章:

javascript - d3 v4 为什么 X 轴上有重复的刻度(如何使用刻度值)?

javascript - 检测浏览器和操作系统版本

javascript - 隐藏 d3 中 Mousedown 上的节点

javascript - 使用 PHP 的通用网站爬虫

html - css 背景图像定位在 firefox 中的工作方式不同

javascript - HTML5 属性操作 : Vanilla JS vs. jQuery

html - 如何在 div 中控制第三方内容

javascript - 多个表单触发到单个工作表

javascript - 单击 # 链接时无需滚动到页面顶部

javascript - 固定标记在中心并拖动 map 以获得纬度,经度