鼠标悬停的背景移动的工作 Jsfiddle 示例在实际项目环境（Django）中不起作用？
Posted
技术标签:
【中文标题】鼠标悬停的背景移动的工作 Jsfiddle 示例在实际项目环境（Django）中不起作用？【英文标题】：Working Jsfiddle example of background move on mouse over doesn't work in actual project environment (Django)? 【发布时间】：2016-12-27 22:47:23 【问题描述】：我试图通过鼠标移动（覆盖的内容保持不变）使背景图像移动（一点）。小提琴工作正常：https://jsfiddle.net/X7UwG/1538/ 但是当我把它带回我的 django 项目时，它没有一点也不让步。
我参考了其他答案，但我不知道出了什么问题。
<!doctype html>
% load static %
<html>
<head>
<style>
#landing-content
background-size: 100%;
height: 90%;
width: 50%;
background-repeat: no-repeat;
</style>
<title>% block title %% endblock title %</title>
% block linkrel %<link rel="stylesheet" href="% static 'courses/css/layout.css' %">% endblock linkrel %
</head>
<body id="landing-content" background="% static 'courses/images/back7.jpg' %">
<section class="site-container slider">
<article class="glass down">
<div class="titleheader" style="width:100%;heigh t:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
<a href="% url 'views.hello_world' %" class="titleheaderimg">
<img src="% static 'courses/images/trendzlink_blue2.png' %" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
</a>
</div>
</article>
% block contentt %% endblock contentt %
</section>
</body>
<script>
$('#landing-content').mousemove(function(e)
var amountMovedX = (e.pageX * -1 / 6);
var amountMovedY = (e.pageY * -1 / 6);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
);
</script>
</html>
layout.html 扩展为 home.html（子模板）：
% extends "layout.html" %
% block title %Home Page% endblock %
% block contentt %
<div style="height:100px;">
<p>
</p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
<h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span><a href="/courses/team/">XYZ based team</a></span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
<br><span><a href="/courses/product/">Know more.</a></span></h2>
</div>
<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
<h3><a href="/courses/contact/">Contact us.</a></h3>
</div>
% endblock contentt %
Any help would be greatly appreciated!
【问题讨论】：
【参考方案1】：由于 fiddle 运行良好，请检查调试器的 [按 F12] 控制台面板，看看是否有任何错误可以修复。
【讨论】：
以上是关于鼠标悬停的背景移动的工作 Jsfiddle 示例在实际项目环境（Django）中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章