Django Admin - 悬停时显示图像

Posted 2023-02-24

【中文标题】Django Admin - 悬停时显示图像

【英文标题】：Django Admin - display image on hover

【发布时间】：2020-10-07 14:44:22

【问题描述】：

当我将鼠标悬停在 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)

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

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

【参考方案1】：

这可能只是图像的位置属性的问题，如果它是position: relative，那么它会在其他元素中自行修复，你必须将它设置为position: absolute，从这里你应该给它top和left，例如：top: 0px; left: 0px;相对于我猜是<a>元素的父元素......你还应该将position: relative应用于父元素：我认为是<a> 或<img> 元素的父元素

【讨论】：

谢谢！我很乐意试一试。我的 CSS（尤其是在奇怪的 python 代码 sn-ps 中应用的 CSS）有点受限 - 对上面的代码进行这些修改的最佳/最干净的方法是什么？

只需在style 属性中添加相应的样式：因为您已经有样式属性，所以对于<a> 元素添加position: relative 到这个属性：style="font-size: 18pt; [add it here]" 和<img>元素，将position: absolute; top: 0px; left: 0px 添加到各自的样式属性中...对于“顶部”和“左侧”，您可以根据需要进行自定义

太棒了，谢谢 - 这几乎可以做到。现在，它使它悬停在屏幕的左上角（这是有道理的，给定坐标）。如果可能的话，我很乐意让它通过鼠标本身悬停（靠近 元素）。我尝试将 的位置切换为相对位置，但这使它重新排列并扭曲了整体布局。你还有什么建议吗？再次感谢！

据我所知，第一个问题，<img> 标签是否被<a> 元素包裹？如果是这样，那么将 a 元素的位置设置为相对位置将解决这个问题，POINTER：对于要定位为绝对但相对于任何其他元素的元素，父元素（无论哪个元素包含该元素） element) 必须有position: relative 甚至是绝对的。

做到了！太感谢了。我可以通过完全按照您的建议进行修复 - 添加相对于 元素的位置。谢谢！！