时间戳

首页 > 解决方案 > Django Admin - 悬停时显示图像

javascript - Django Admin - 悬停时显示图像

问题描述

当我将鼠标悬停在 Django Admin 视图中的文本（相机表情符号）上时，我想在弹出窗口中显示缩略图。我的代码有效，但内联显示图像，这破坏了网站的其余布局

我绝不是 Django 专家，所以我可能缺少一些简单的东西。如果这是最好的前进道路，我完全愿意使用其他库来提供帮助，但我不确定如何将它们适当地加载到 django admin 中。我也对纯 js/css 解决方案持开放态度——无论哪种效果最好！

这是我的代码

def image_column(self, obj):
    format_html(foo + " " + \
            '''<a href="{}"" target="_blank" 
            style="font-size: 18pt" 
            onmouseover="document.getElementById('{}_img').style.display='block';"
            onmouseout="document.getElementById('{}_img').style.display='none';">  
            <img id="{}_img" style="display:none" src="{}" />'''.format(img_url, img_id, img_id, img_id, img_url)

我喜欢任何关于使其“弹出”而不是内联显示的最佳方式的想法或建议。谢谢！！

编辑：现在一切正常，除了弹出窗口上显示的相机表情符号。背景中的图像是一张地图（应该在顶部）。相机图像来自其下方的行

弹出上方的相机表情符号

标签： javascriptcssdjangodjango-admin

解决方案

这可能只是与图像的位置属性有关的问题，如果是position: relative，那么它将在其他元素中自行修复，您必须将其设置为position: absolute和从此处您应该给它top和left，例如：top: 0px; left: 0px;相对于我猜的父元素是<a>元素......而且你也应该适用position: relative于父元素：我再次认为是<a>或者哪个父元素是<img>元素

推荐阅读