diff --git a/index.html b/index.html
index 7d8d10c..77d54ba 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,9 @@
stroke: red;
/* There has to be a fill, even if it's transparent, to allow
hover events to be recognized on the inside. */
- fill: black;
- fill-opacity: 0.0;
+ /* fill: black;
+ fill-opacity: 0.0; */
+ fill-opacity: 0.8;
stroke-width: 1;
}
.languageText, .romanizationText {
@@ -48,6 +49,10 @@
.language:hover ~ .languageText {
visibility: visible;
}
+ .language:hover ~ .romanizationText {
+ visibility: visible;
+ }
+
.testClass:hover {
fill: red;
cursor: default;
@@ -57,6 +62,8 @@
stroke: white;
stroke-width: 0.25;
transition: fill 0.3s;
+ fill: none;
+ pointer-events: none;
}
.language:hover {
stroke-width: 2;
@@ -75,6 +82,18 @@
.loading, .htmx-request.loading-indicator /* While request is being made */ {
display: inline;
}
+
+ /* Dim all other states */
+ /* Kinda wild that you can do this in plain CSS */
+ #indiaMap:has(.language:hover) .language:not(:hover) {
+ fill-opacity: 0.5;
+ transition: fill-opacity 0.3s;
+ }
+
+ #indiaMap .language:hover {
+ fill-opacity: 1;
+ transition: fill-opacity 0.3s;
+ }
@@ -89,7 +108,7 @@
-
+