个人中心
gpt4 book ai didi

html - 为什么悬停时颜色不变？

转载 作者：行者123 更新时间：2023-11-27 23:12:30 26 4
gpt4 key购买 nike

也许你可以帮我解释一下。我是 svg 的新手。我有这个 svg，它是一张 map ，它分为几个部分。我想将鼠标悬停在选定的部分上，使其颜色变为紫色，同时将该部分上的点颜色更改为黄色。第一个条件得到满足，但我可以让点改变它的颜色。这是代码:

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>

最佳答案

您更改站元素的 CSS 是:

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

这是一个选择器，其中 .stationlocationcontainer 是您路径的 child ，这里不是这种情况。

同样，没有CSS Selector这将使您能够转义 g 包装器，然后转义 SVG 以影响后续 div 的子级

我怀疑需要重组或您的 HTML、SVG 和/或 CSS。

关于html - 为什么悬停时颜色不变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58448448/

26 4 0
文章推荐： c++ - 如何打印指向类c++类型的指针的值
文章推荐： javascript - Controller 的指令和实例
文章推荐： php - Wordpress - CSS 样式不适用于一行
文章推荐： c++ - 在 C++ 错误中将数组作为参数传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com