Added a transparent fill, so that the language boundary can be 'hovered' on; added a hover action
This commit is contained in:
13
index.html
13
index.html
@@ -27,7 +27,10 @@
|
|||||||
}
|
}
|
||||||
.language {
|
.language {
|
||||||
stroke: red;
|
stroke: red;
|
||||||
fill: none;
|
/* 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;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,15 +39,15 @@
|
|||||||
stroke-width: 0.5;
|
stroke-width: 0.5;
|
||||||
transition: fill 0.3s;
|
transition: fill 0.3s;
|
||||||
}
|
}
|
||||||
.district:hover {
|
.language:hover {
|
||||||
stroke-width: 1.5;
|
stroke-width: 3;
|
||||||
}
|
}
|
||||||
.districtText {
|
.districtText {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
.district:hover ~ .districtText {
|
/* .district:hover ~ .districtText {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}*/
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
Reference in New Issue
Block a user