html - SVG 地图的 Django CSS 问题

问题描述

我有以下带有 svg 的 html：html 代码

和以下CSS：

body{
    background-color: rgb(162, 190, 199);
}

.mapdiv{
    width:28%;
    margin: auto;
}

.mapdiv path {
    fill: #e8e9d6;
    stroke: #000000;
    stroke-width:0.8px;
    transition: fill 0.3s;
}

.mapdiv :hover {
    fill:rgb(177, 38, 38);
}

看起来像这样：

但是，当在 django 中使用相同的代码并像这样加载静态时：

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Map</title>
    
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

除了 :hover 之外，CSS 工作正常

.mapdiv :hover {
    fill:rgb(177, 38, 38);
}

为什么？

标签： htmlcssdjango

您只需将 div 悬停在 svg 标签父级上。

我认为应该是：

.mapdiv:hover path {
  fill:rgb(177, 38, 38);
}

html - SVG 地图的 Django CSS 问题

问题描述

解决方案

推荐阅读