Question

如何向此django管理功能添加css悬停效果，该功能在管理部分显示缩略图。放大图像的大小

def image_tag(self):
        if self.image:
            return mark_safe('<img src="%s" style="width: 50px; height:40px;" />' % self.image.url)
        else:
            return 'No Image Found'
    image_tag.short_description = 'Image'

Answer 1

我建议将图像包装在一个或另一个元素上，并在将鼠标悬停时将图像的位置设置为绝对位置，这样一来，即使放大时也不会弄乱布局。

查看此codepen示例，让我知道它是否适合您： https://codepen.io/darthrubens/pen/Zqgwoa

.profile-pic-wrapper {
  width: 60px;
  height: 90px;
  cursor: pointer;
}

.profile-pic-wrapper img {
  position: relative;
  width: 60px;
}

.profile-pic-wrapper:hover img {
  position: absolute;
  width: 120px;
}

<div class="profile-pic-wrapper">
  <img src="https://media.bizj.us/view/img/10179818/nicolascage2011cc*750xx617-823-17-0.jpg" />
</div>
<div>
  Some other content
</div>

Answer 2

在Django内部创建一个静态目录 app-> static-> app_name-> css-> style.css

然后在您的admin.py中添加这样的样式

class Media:   
    css = {
     'all': ('app_name/css/style.css',)
    }

在模型管理员内部。例如：

class ModelNameAdmin(admin.ModelAdmin):
      class Media:   
             css = {
             'all': ('app_name/css/style.css',)
            }

然后编写您的自定义CSS

在django admin中将鼠标悬停在django缩略图上

2 个答案: