如何在我的 Django 应用程序中为我的图像添加动画？

Question

我正在尝试为我的 Django 应用程序中的某些图像添加一种动画，我想要做的是当用户在图像周围移动鼠标时，它会变大。

我尝试在我的 CSS 中添加一些代码，但图像不会改变

感谢您的帮助。

我的 index.html

 {%block contenido %} <div id="container" class="foto_pelicula"> {% for p in peliculas %} {% if p.genero.id == 1 %} <a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li> {% endif %} {% endfor %} </div> <div id="container" class="foto_pelicula"> {% for p in peliculas %} {% if p.genero.id == 2 %} <a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li> {% endif %} {% endfor %} </div> <div id="container" class="foto_pelicula"> {% for p in peliculas %} {% if p.genero.id == 3 %} <a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li> {% endif %} {% endfor %} </div> {% endblock %}

图像 SRC 是我从互联网上获取的网址，我想它们是从互联网上获取还是存储在您的项目中并不重要。

我的 CSS

 #container{ width: 290px; overflow: hidden; margin: 5px 4px 0 auto; padding: 0; background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */ border: 3px solid #8E1600; float: left; }

我将此新行添加到我的 CSS 中，但图像不会改变。

 .foto_pelicula > img:hover { transform: scale(1.1); }

也许我没有在 CSS 中使用正确的行，因为我是一名初级程序员。

非常感谢帮助

Answer 1

这个问题与 Django 没有关系。 将来尝试为您的目的创建工作 html 模板，然后将其添加到 django 模板。

您设置.foto_pelicula > img:hover来转换图像。 但是>选择器只找到直接的孩子。 请参阅 有关选择器的文档。

在您的代码中，直接子项是a ，但不是img 。 因此你看不到结果。 您可以将 css 规则更改为.foto_pelicula > a > img:hover

见演示：

 #container{ width: 290px; overflow: hidden; margin: 5px 4px 0 auto; padding: 0; background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */ border: 3px solid #8E1600; float: left; } .foto_pelicula > a > img:hover { transform: scale(1.1); }

 <div id="container" class="foto_pelicula"> <a href="#"><img src="https://via.placeholder.com/289" width="289" height="289"/></a> </div>

重要的

在您的 html 代码中，我看到几个带有id="container" div。 您只能为每个页面设置一个具有特定名称的 ID。 这就是它称为identifier的原因。

因此，将您的 id 更改为类或为此 div 提供不同的 id 名称。