在实际的项目环境(Django)中，鼠标在后台移动的示例不起作用

Working Jsfiddle example of background move on mouse over doesn't work in actual project environment (Django)?

本文关键字：后台 鼠标 移动 不起作用 项目 环境 Django      更新时间：2023-09-26

我试图使背景图像移动(一点)与鼠标移动(与覆盖的内容保持不变)。嗯，小提琴工作: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' %}" alt="G" 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!

既然小提琴工作良好，检查调试器的[按F12]控制台面板，看看是否有任何错误，你可以修复

相关文章：