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是我从互联网上获取的网址，我想它们是从互联网上获取还是存储在您的proyect中都没有关系。

我的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来变换图像。但是>选择器只能找到直接子级。参见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名称。

如何在Django应用中向图像添加动画？

1 个答案: