Применить эффект наведения на прозрачные части SVG

В настоящее время я использую встроенный SVG на своем веб-сайте, который меняет цвет на :hover. Поскольку изображение содержит прозрачные части, эффект зависания применяется только тогда, когда я над path.Применить эффект наведения на прозрачные части SVG

Пример:

$(function() { 
 
    $('svg').mouseenter(function() { 
 
    $('.green').toggleClass("hovered"); 
 
    }); 
 
});

.green.hovered { 
 
    fill: blue; 
 
} 
 
.green { 
 
    fill: green; 
 
} 
 
.green:hover { 
 
    fill: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="130.379" height="130.379" viewBox="0 0 130.379 130.379"> 
 
    <path class="green" d="M68.15 78.234H57.785v-4.332c0-18.566 20.05-18.34 20.05-30.87 0-6.267-5.58-9.8-12.986-9.8-5.354 0-11.28 2.508-15.95 8.203l-7.292-5.468c6.61-7.745 14.81-11.39 24.266-11.39 14.354 0 22.898 8.653 22.898 17.767 0 18.228-20.62 15.84-20.62 32.128v3.762zM63.253 89.97c4.56 0 7.978 3.528 7.978 7.854 0 4.443-3.417 7.98-7.977 7.98-4.443 0-7.86-3.536-7.86-7.98 0-4.326 3.417-7.855 7.86-7.855z M65.19 0C29.186 0 0 29.187 0 65.19s29.187 65.188 65.19 65.188 65.188-29.187 65.188-65.19S101.192 0 65.188 0zm0 120.13c-30.343 0-54.94-24.6-54.94-54.94 0-30.342 24.598-54.94 54.94-54.94s54.938 24.598 54.938 54.94c0 30.34-24.596 54.94-54.94 54.94z" 
 
    /> 
 
</svg>

Есть ли CSS-единственное решение моей проблемы? И если мне нужно использовать сценарий, почему моя работа не работает?

источник

2015-11-22 idleberg

Вы не можете использовать 'svg: hover .green' вместо этого? Тогда вам не придется использовать JS;) – Terry

Спасибо, это работает! Чувство теперь глупо, но я только пробовал 'svg .green: hover', и это ничего не делало. Не стесняйтесь ответить на это правильно, и я приму решение. – idleberg

Поскольку вы слушаете мыши ввести событие на родителе SVG, вам не нужно использовать JS-селектор svg:hover .green должен работать нормально.

источник

2015-11-22 16:34:54 Terry

Использование:

svg:hover .green { 
    fill: red; 
}

источник

2015-11-22 16:33:44

Применить эффект наведения на прозрачные части SVG

ответ

Смежные вопросы