html - 如何在我的 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 是我从互联网上获取的 url，我想它们是从互联网上获取的还是存储在您的元素中并不重要。

我的 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 来转换图像。但是 > 选择器只能找到直接的 child 。参见 documentation on selectors .

在您的代码中，直接子级是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 名称。