如何在 djangocms 中添加 css 伪规则？我想实现悬停效果答案

【问题标题】：How do I add a css pseudo rules in djangocms? I want to implement a hover effect如何在 djangocms 中添加 css 伪规则？我想实现悬停效果
【发布时间】：2019-11-15 11:08:47
【问题描述】：

当鼠标悬停在该区域上时，我想更改 div 的不透明度，以便可以在 djangocms 中显示一些文本。

当我添加 .team-img:hover .overlay { opacity: .8; } 时，djangocms 会在我保存更改时清除它，因为它会混淆 :hover 来定义属性值

Djangocms 为规则类型提供了一个属性字段，为值提供了另一个字段。在属性字段中我写了样式，在值字段中我写了

.team-img:hover .overlay { opacity: .8; }

【问题讨论】：

您能否详细说明一下您在哪里添加了有问题的 css？

标签： django-cms djangocms-text-ckeditor

【解决方案1】：

您不能也不应该在内联添加伪元素样式。见this answer。

对于 Django CMS，放置样式的正确位置是项目的 css 文件。在您的情况下，您可能应该添加：

.team-img:hover .overlay { opacity: .8; }

然后，您可以使用class 属性在属性字段中添加类。

可能更好，如果您使用djangocms-style 插件，您可以通过正确设置类来配置样式（特别是DJANGOCMS_STYLE_CHOICES）。见this github repository。这减轻了编辑者记住类名的负担。

【讨论】：