#id:not(.class):hover не работает

Есть часть кода svg

<g id="Ukraine" class="map-country">
                    <path class="country" fill-rule="evenodd" clip-rule="evenodd" d="M602.795 271.519L606.079 271.122L612.779 274.564L616.325 272.711L630.644 270.592L637.212 270.328L641.547 266.62L644.042 266.885L649.165 269.665L660.988 271.519L666.111 274.035L666.899 276.418L674.124 273.505L677.539 276.682L680.298 276.55L682.137 274.697L688.311 275.623L691.201 276.948L697.637 272.975L703.286 273.77L704.074 277.742L707.489 278.933L711.299 274.167L715.634 273.902L719.049 276.285L725.092 274.432L728.638 277.609L733.105 276.948L733.499 269.93L736.52 261.986L742.562 261.457L751.364 259.206L755.173 260.133L759.902 259.074L759.508 254.704L762.661 251.791L772.907 255.234H783.415L788.67 252.454L793.399 252.718L796.551 262.384L800.755 265.958L798.39 270.592L804.039 278.007L815.599 276.418L819.671 279.992L820.328 284.362L824.137 284.891V290.585L826.37 297.337L835.697 306.472L839.506 302.368L845.286 305.413L850.015 304.089L854.481 305.016L861.443 299.588L864.727 299.191L869.325 309.385L875.762 313.357L877.601 317.462L880.49 314.549L887.847 316.27L893.364 316.402L897.305 318.785L901.639 317.991L907.025 321.301L913.33 322.492L916.352 319.448L918.191 324.214L921.081 325.802L921.212 331.363L917.797 335.997L913.462 336.924L912.148 345.927L918.06 350.032L918.979 356.122L916.352 363.669L917.14 368.965L913.462 371.745L903.478 372.407L899.012 379.557L896.385 380.748L895.203 390.546L891.262 391.87L890.868 389.751L888.635 389.354L883.512 391.605L878.389 391.076L875.63 393.194L873.922 396.769L869.456 397.033L867.223 400.211L862.888 404.977L861.312 404.448L857.108 404.977L853.693 407.625L848.307 406.301L843.972 409.082L841.345 408.552L838.718 404.05L836.879 404.183L838.061 406.699L840.426 409.611L839.506 412.259L835.171 418.614L832.675 420.071L831.756 418.085L833.332 417.158L837.273 412.259L836.748 410.538L834.514 409.214L833.726 411.597L827.552 418.085L823.743 418.747L823.086 421.263H818.751L815.861 419.144L813.366 421.395L808.768 420.6L808.111 422.322L810.87 424.175L817.306 423.646L819.802 426.691L822.298 428.544L824.662 427.22L826.107 429.339L824.006 431.854L824.268 433.708L826.107 432.384H827.946L827.29 435.694L829.786 433.443L832.019 434.767L832.938 439.534L835.303 442.049L840.032 443.506L842.002 442.314L835.171 435.694L827.946 426.956L825.976 421.66L827.684 420.468L830.836 424.837L832.281 430.398L842.265 441.387L844.629 442.314L848.045 438.739L850.409 438.607L854.35 441.122L855.926 436.886L862.494 436.091L867.88 436.356L866.304 439.004L864.333 440.725L866.172 444.565L863.676 447.477L856.714 448.14L848.57 446.816L843.71 449.464L840.163 454.494L833.595 454.362L824.006 461.512L816.912 464.822L809.425 464.557L805.878 461.644L806.929 460.055L809.425 452.509L809.031 449.596L802.594 444.432L800.23 444.697L795.632 442.447L792.873 444.83L789.327 443.241L793.53 436.886L800.886 432.384L806.929 431.325L808.637 430.266L806.272 427.353L805.353 422.189L803.382 421.395L801.937 424.307L798.653 422.454L793.924 420.336L788.933 421.263L784.598 423.513L780.92 421.395L778.03 421.13L775.008 418.482L777.241 417.026L778.161 415.437L771.987 413.451H764.631L762.792 410.803H767.389L774.483 409.876L778.292 411.068L780.92 409.611L785.254 406.963L779.081 408.552L775.928 407.493L773.432 405.507L771.987 403.256L770.279 406.037L768.572 408.42H764.762L765.025 407.36L762.661 405.11L758.588 410.273L753.728 410.538L750.838 412.921V418.085L746.635 423.646H744.401L745.584 426.294L737.833 435.694H735.206L733.499 433.046L733.367 436.091L732.842 438.607L734.812 441.122L734.024 444.697V444.83L730.609 441.917L724.172 442.447L720.757 444.962L713.269 444.83L707.489 443.638L704.205 437.812L707.227 435.562L710.642 436.621L710.773 432.914L714.714 425.764L716.685 426.029L716.553 420.865L717.21 413.451L721.151 413.319L726.537 411.465L729.821 414.113L735.863 413.98L736.651 411.73L734.155 408.155L734.944 404.713L734.287 401.006L728.376 397.43L723.253 392.797L722.464 390.546L717.867 388.163L718.392 383.132L717.079 375.849L711.824 373.202L705.388 366.714H703.549L702.498 369.097L695.798 368.303L689.362 362.477H684.107L681.086 357.711L679.378 359.432H674.912L673.598 361.418L669.658 359.035L668.738 360.359L665.454 359.035L666.374 364.596L665.585 366.979L666.374 372.142L661.645 372.937L656.784 375.982L642.991 378.365L639.576 382.469L635.373 382.734L628.805 384.853L624.47 382.734L622.499 379.424L616.982 376.909L611.202 376.776L603.846 372.407H599.774L597.147 374.923L593.075 375.055L591.63 371.348L586.375 367.906L581.515 363.272L582.435 362.609L583.354 355.592L587.558 346.457L591.498 346.854L591.761 340.499L590.842 334.806L603.452 320.639L605.291 314.284L608.444 310.974L611.859 310.842L613.041 304.619L611.465 302.103L610.94 298.925L612.647 296.542L607.656 293.365L605.291 287.275L602.664 284.627L602.533 275.094L602.795 271.519Z" fill="white" stroke="#E3E3E3" stroke-width="2" mask="url(#path-1-inside-1)"/>
                    <path class="innerText" d="M770.433 335.196C772.041 335.196 773.505 335.52 774.825 336.168C776.145 336.816 777.189 337.74 777.957 338.94C778.725 340.116 779.109 341.484 779.109 343.044C779.109 344.724 778.689 346.2 777.849 347.472C777.009 348.744 775.857 349.728 774.393 350.424C772.953 351.096 771.345 351.432 769.569 351.432C766.041 351.432 763.281 350.352 761.289 348.192C759.297 346.032 758.301 342.948 758.301 338.94C758.301 336.084 758.841 333.636 759.921 331.596C761.001 329.556 762.501 328.008 764.421 326.952C766.365 325.896 768.609 325.368 771.153 325.368C772.497 325.368 773.781 325.524 775.005 325.836C776.253 326.124 777.309 326.544 778.173 327.096L776.013 331.38C774.765 330.54 773.193 330.12 771.297 330.12C769.161 330.12 767.469 330.744 766.221 331.992C764.973 333.24 764.301 335.052 764.205 337.428C765.693 335.94 767.769 335.196 770.433 335.196ZM769.245 347.076C770.493 347.076 771.501 346.74 772.269 346.068C773.061 345.396 773.457 344.484 773.457 343.332C773.457 342.18 773.061 341.268 772.269 340.596C771.501 339.9 770.469 339.552 769.173 339.552C767.901 339.552 766.857 339.912 766.041 340.632C765.225 341.328 764.817 342.228 764.817 343.332C764.817 344.436 765.213 345.336 766.005 346.032C766.797 346.728 767.877 347.076 769.245 347.076ZM792.995 336.06C795.203 336.42 796.895 337.248 798.071 338.544C799.247 339.816 799.835 341.4 799.835 343.296C799.835 344.76 799.451 346.116 798.683 347.364C797.915 348.588 796.739 349.572 795.155 350.316C793.595 351.06 791.675 351.432 789.395 351.432C787.619 351.432 785.867 351.204 784.139 350.748C782.435 350.268 780.983 349.596 779.783 348.732L782.051 344.268C783.011 344.988 784.115 345.552 785.363 345.96C786.635 346.344 787.931 346.536 789.251 346.536C790.715 346.536 791.867 346.26 792.707 345.708C793.547 345.132 793.967 344.328 793.967 343.296C793.967 341.232 792.395 340.2 789.251 340.2H786.587V336.348L791.771 330.48H781.043V325.8H798.683V329.58L792.995 336.06Z" fill="#44B0FF"/>
                    <rect x="779.01" y="288.707" width="69.7256" height="69.7256" transform="rotate(45 779.01 288.707)" stroke="#44B0FF"/>
                    <line  class="line-svg" x1="70%" y1="3%" x2="70%" y2="40%"  stroke="#fff" stroke-width="2" />
                    <text  class="bold-title" x="70.5%" y="8%" fill="#fff">Украина</text>
                    <text  class="svg-title" x="71.5%" y="11%" fill="#fff">63 реализованных проэкта</text>
                </g>

и есть код scss

#Ukraine:not(.bold-title):not(.line-svg):not(.svg-title):hover{
        .country {
            transition: 0.6s;
            fill: #44B0FF;
        }
        .innerText {
            transition: 0.6s;
            fill: #fff;
        }
        rect {
            transition: 0.6s;
            stroke: #fff;
        }
        .line-svg {
            stroke: #44B0FF;
            opacity: 1;
        }
        text {
            fill: #44B0FF;
            opacity: 1;
        }
    }

Мне нужно что бы hover срабатывал НЕ на все вложености тега g


Ответы (1 шт):

Автор решения: Август

а зачем здесь :not()? вот так разве не работает?

#Ukraine:hover{
        .country {
            transition: 0.6s;
            fill: #44B0FF;
        }
        .innerText {
            transition: 0.6s;
            fill: #fff;
        }
        rect {
            transition: 0.6s;
            stroke: #fff;
        }
        .line-svg {
            stroke: #44B0FF;
            opacity: 1;
        }
        text {
            fill: #44B0FF;
            opacity: 1;
        }
    }

пересмотрите своё понимание на счет :not().

#Ukraine:not(.bold-title):not(.line-svg):not(.svg-title) значит, что Вы хотите взять селектор #Ukraine, который так же НЕ включает в себя классы bold-title, line-svg, svg-title

→ Ссылка