Why on hover the color doesn't change?

Question

Maybe you can help and explain it to me. Im new to svg. I have this svg, its a map and it is divided into sections. I want to hover over a chosen section make it change color to purple and at the same time change the color of the dot to yellow that is on that section. The first condition is met but I can get the dot to change its color. here is the code:

html,
body {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.container {
  /*border: 1px solid blue;*/
  text-align: center;
}

.station {
  stroke-width: 6;
  stroke: red;
  fill: red;
  opacity: 0.7;
}

.stationlocationcontainer {
  height: 100%;
  width: 100%;
  border: 1px solid green;
  position: absolute;
  top: 0%;
  pointer-events: none;
}

.stationlocation:nth-child(1) {
  position: absolute;
  top: 24%;
  left: 46%;
}

.stationlocation:nth-child(2) {
  position: absolute;
  top: 39%;
  left: 39%;
}

.stationlocation:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 35%;
}

.stationlocation:nth-child(4) {
  position: absolute;
  top: 52%;
  left: 41%;
}

.stationlocation:nth-child(5) {
  position: absolute;
  top: 63%;
  left: 33%;
}

.stationlocation:nth-child(6) {
  position: absolute;
  top: 59%;
  left: 42%;
}

.stationlocation:nth-child(7) {
  position: absolute;
  top: 73%;
  left: 34%;
}

.stationlocation:nth-child(8) {
  position: absolute;
  top: 70%;
  left: 40%;
}

.stationlocation:nth-child(9) {
  position: absolute;
  top: 73%;
  left: 45%;
}

.stationlocation:nth-child(10) {
  position: absolute;
  top: 84%;
  left: 28%;
}

.stationlocation:nth-child(11) {
  position: absolute;
  top: 73%;
  left: 49%;
}

.stationlocation:nth-child(12) {
  position: absolute;
  top: 73%;
  left: 51%;
}

.stationlocation:nth-child(13) {
  position: absolute;
  top: 73%;
  left: 57%;
}

.stationlocation:nth-child(14) {
  position: absolute;
  top: 61%;
  left: 60%;
}

.stationlocation:nth-child(15) {
  position: absolute;
  top: 58%;
  left: 67%;
}

.stationlocation:nth-child(16) {
  position: absolute;
  top: 58%;
  left: 67%;
}

.stationlocation:nth-child(17) {
  position: absolute;
  top: 50%;
  left: 60%;
}

.stationlocation:nth-child(18) {
  position: absolute;
  top: 50%;
  left: 67%;
}

.stationlocation:nth-child(19) {
  position: absolute;
  top: 44%;
  left: 61%;
}

.stationlocation:nth-child(20) {
  position: absolute;
  top: 44%;
  left: 68%;
}

.stationlocation:nth-child(21) {
  position: absolute;
  top: 34%;
  left: 63%;
}

.stationlocation:nth-child(22) {
  position: absolute;
  top: 36%;
  left: 68%;
}

.stationlocation:nth-child(23) {
  position: absolute;
  top: 24%;
  left: 69%;
}


/*
  #PV_svg #layer2 #path4461:hover,
    #PV_svg #layer2 #path4463:hover,
    #PV_svg #layer2 #path4465:hover,
    #PV_svg #layer2 #path4474:hover,
    #PV_svg #layer2 #path4476:hover,
      #PV_svg #layer2 #path4478:hover,
      #PV_svg #layer2 #path4480:hover,
      #PV_svg #layer2 #path4482:hover,
      #PV_svg #layer2 #path4484:hover,
      #PV_svg #layer2 #path4486:hover,
      #PV_svg #layer2 #path4488:hover,
      #PV_svg #layer2 #path4490:hover,
      #PV_svg #layer2 #path4492:hover,
      #PV_svg #layer2 #path4494:hover,
      #PV_svg #layer2 #path4496:hover,
      #PV_svg #layer2 #path4498:hover,
      #PV_svg #layer2 #path4500:hover,
      #PV_svg #layer2 #path4502:hover,
      #PV_svg #layer2 #path4504:hover,
      #PV_svg #layer2 #path4506:hover,
      #PV_svg #layer2 #path4508:hover,
      #PV_svg #layer2 #path4510:hover,
      #PV_svg #layer2 #path4512:hover,
      #PV_svg #layer2 #path4514:hover,
      #PV_svg #layer2 #path4516:hover{
  fill:red;
}
*/

#PV_svg #layer2 #path4461:hover {
  fill: purple;
}

.svg-wrap #PV_svg #layer2 #path4461:hover .stationlocationcontainer .stationlocation .station {
  fill: yellow;
}

.stationlocation {
  border: 1px solid yellow;
}

.stationpath {
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 8;
  width: 100%;
}

.stationlocationpathcontainer {
  height: 100%;
  width: 100%;
  border: 1px solid green;
  position: absolute;
  top: 0%
}

.stationlocationpath:nth-child(1) {
  position: absolute;
  top: 14.5%;
  left: 30%;
  border: 3px solid red;
}

#PV_svg {
  /*border: 1px solid red;*/
}

.svg-wrap {
  position: relative;
}

<div class="container">
  <div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" id="PV_svg" viewBox="0 0 4793 4950" version="1.1" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}"
      width="50%" height="50%">
          <g id="layer4" display="inline">
            <path d="M143.515 4733.376l662.293-2452.454 531.914-558.737 318.63-500.329 616.195-442.396 476.63 71.1-108.496 252.335-341.8 84.728-107.27 225.14 41.436 127.724 81.633 21.066-34.233 273.864-487.162-71.099-23.7 508.229 650.427 279.131-226.464 861.093 200.131 56.616 134.3-176.432 334.43 84.266 13.166-685.978 180.382-38.183 21.067-408.163 324.908-470.9-24.206-100.549-297.925-29.793 44.688-534.403 572.68 88.904L3842 961.158l547.729-463.462 86.596 259.632-247.228 2349.979-549.045 64.516-200.132 667.544-2189.598 15.8-679.394 703.094z" id="path4473" opacity=".204" fill="#00f" fill-rule="evenodd" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></g><g id="layer2" display="inline" opacity=".522" fill="green" fill-rule="evenodd" stroke-width="15" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1">
            <path d="M183.876 4624.769h209.013l8.379-34.448h93.101l49.344-187.134 201.514-.292 31.6-129.032h100.065L937.46 4023.7l-318.631 1.316 57.933-230.414H402.897z" id="path4459" display="inline" opacity="1" stroke="#000" stroke-linecap="butt" stroke-linejoin="miter"/>
            <path d="M2292.161 826.224h210.41l.452 24.206h124.304l-.413 26.068h87.928l-74.161 226.397-167.903.771-3.724 39.103-206.685 1.862-70.758 268.133 91.24 363.096-316.545 1.862v-37.24l-72.956-326.394 22.68-79.53-294.23.982 32.239-63.651h78.68l26.492-92.937 189.439.771 15.8-39.5-93.483 1.317 11.85-40.816h65.833l21.066-73.733h94.8l37.718-109.528 89.997 1.562 10.533-39.5 96.116-1.316z" id="path4461" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1621.8 1335.54l-35.349 95.844 26.068 139.652h-158.272l27.93 128.48 7.449 31.655 78.205 1.862 1.862 57.723-264.409-1.862-35.378 44.689 9.31 78.205-94.964 1.862-14.896 57.723-39.103 171.307 301.65 1.862-13.035 61.447 296.063 1.862 59.585-296.063 1.862-171.307h189.928l-72.956-326.393 22.68-79.53z" id="path4463" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1130.253 2142.68l-191.337 1.862-39.874 137.151-93.234-.77-47.19 180.164h89.152l-11.944 42.282-89.47-.546-76.025 313.913 599.652 1.277 148.885-612.024 13.035-61.447z" id="path4465" stroke="#000" stroke-linecap="butt" stroke-linejoin="miter"/>
            <path d="M1418.868 2205.99l-158.273 654.505 266.27-.932 9.31-27.931h310.959l126.619-463.647h-91.24l7.449-33.517-201.872-.77-22.118 87.128-20.153-.814 53.983-213.298-280.934-.727" id="path4474" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M676.76 3794.6l102.7-389.73h331.797l149.338-544.375 9.388-42.482-599.652-1.277L402.897 3794.6z" id="path4476" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M937.459 4023.699l6.591-33.883h191.79l31.654-137.79 96.826 1.861 123.435-449.468-276.498.452H779.46l-102.7 389.73-57.932 230.414z" id="path4478" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1191.7 3110.937H2070.58l165.102-625.092-94.8-2.633 7.9-31.6h-197.498l-104.15 380.02h-310.958l-9.31 27.931-266.27.932z" id="path4480" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2044.51 3170.522l-69.214 306.915-242.516 1.543-94.192 320.908-3.724 37.241-344.156-.639 97.916-379.216h101.002l9.31-52.136-111.181-.72-276.498.453 63.685-238.074z" id="path4482" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1983.835 3434.93l194.742 1.862-5.586 33.517 93.873 1.09-36.695 139.879-101.867.545-11.172 48.413 100.87-.771-33.837 106.907 8.38 29.792-4.27 38.624-553.41 2.341 3.725-37.24 94.192-320.91 242.516-1.542z" id="path4484" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M4236.122 684.71l202.962 1.861 11.172 46.55 15.827 29.793-81.62 751.24-587.229-2.634 52.666-458.196 89.533-2.633 18.433-165.899 100.066 2.634 2.633-79h102.7v-47.4l-13.167-39.499 86.899-5.267z" id="path4486" stroke="#0b1728" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3805.993 1219.112l-392.889 1.862 5.586-40.964h-201.099l-9.31 76.343 16.758-1.862-35.379 335.166h-14.896v37.24l297.925-1.862-44.688 409.647h297.925z" id="path4488" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3739.301 2072.416l581.962 2.633 63.2-560.895-587.229-2.634-18.433 186.965 93.482-1.316-3.95 43.45h-97.432z" id="path4490" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3725.926 2034.682L3691.9 2354.18l-586.137 2.5 9.443-136.8 85.356-2.632 36.547-180.156z" id="path4496" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3739.301 2072.416l-14.483 126.398h98.75l-7.9 60.567h-98.75l-10.533 93.482 583.278 1.317 31.6-279.131z" id="path4498" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3105.764 2356.68l-32.69 324.03 581.51-.506 37.318-326.024z" id="path4500" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3706.385 2352.863l-20.22 180.844h101.208l-5.586 39.102-96.826 1.862-13.034 126.619h316.545l1.862-18.62 266.958-.098 32.371-328.392z" id="path4502" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M4257.292 2682.572l-38.728 411.568-292.298-1.317-5.266 22.384-306.781 2.633 32.916-223.832h102.7l2.633-42.133h-100.066l19.525-150.585h316.545l1.862-18.62z" id="path4504" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3654.583 2680.204l-5.932 42.499-303.03 1.457 8.558-44.108z" id="path4508" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3073.073 2680.71l-10.533 97.433-107.194 653.832 596.538-.452 22.158-126.266-102.248-.452 6.81-42.133h102.699l67.348-539.97-303.03 1.458 8.558-44.108z" id="path4510" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2955.346 3431.975l5.285-32.423h-290.477l-70.984 383.578-10.626.28-7.241 38.182 303.582-.658 14.39-55.3 90.85-.545-15.8 54.528h492.429l85.13-388.094z" id="path4512" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2323.897 3493.087l-60.567 323.897h163.266l-39.5-323.897z" id="path4514" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2427.912 3448.32l-7.9 23.7 2.634 102.7 32.916 243.58h106.65l2.633-32.916 67.149-337.064z" id="path4516" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
      </svg>
    <div class="stationlocationcontainer">
      <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
    </div>

    <!--
        <div class="stationlocationpathcontainer">
          <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" class="stationlocationpath"  viewBox="0 0 300 300">
            <path class="stationpath" d="M0,100 L300,100"></path>
          </svg>
        </div>
      -->

  </div>
</div>

As is, your snippet is not that useful. Can you add a second one above? This second one must be a [MCVE]. — aloisdg, Oct 18 '19 at 10:00
Eudz by saying that the code snippet works I mean that I can run the code in the snippet window. I still can't get the second condition when I hover. The section changes purple but the dot stays red, but I want to to change to yellow or any other color. — ukulele, Oct 18 '19 at 10:24
@ukulele "Minimal – Use as little code as possible that still produces the same problem". Remove all the cluff. — aloisdg, Oct 18 '19 at 10:48

score 0 · Answer 1 · answered Oct 18 '19 at 10:50

0

Your CSS to change the station item is:

.svg-wrap #PV_svg #layer2 #path4461:hover .stationlocationcontainer .stationlocation .station {
  fill: yellow;
}

This is a selector where .stationlocationcontainer is a child of your path, which is not the case here.

Equally, there is no CSS Selector that will enable you to escape the g wrapper then the SVG to affect a subsequent div's children

I suspect a restructure or your HTML, SVG &/or CSS is required.

answered Oct 18 '19 at 10:50

Paulie_D

107,962
13
142
161

I see. I thought that as long as there is a overall container in my case it is .svg-wrap than I still will be able to leave the #PV_svg and go into the .stationlocationcontainer class and cascade down. Now I know that this is not allowed. – ukulele Oct 18 '19 at 11:48

Why on hover the color doesn't change?

1 Answers1