Измените ход и цвет заливки SVG при зависании

У меня есть изображение SVG, которое имеет обводку вокруг него, имеющую такое же значение цвета заполненного значка. Значок находится на фоне изображения. Вот мой пример: https://jsfiddle.net/o48629qs/Измените ход и цвет заливки SVG при зависании

То, что я пытаюсь выполнить, заключается в том, чтобы обводка вокруг шестиугольника была того же цвета, что и значок, когда элемент парил, сохраняя черный фон. Мой код ниже. Не уверен, почему он не работает, так как я требую путей изменить цвет, когда они зависают.

HTML

<svg class=“instagram” data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445.33 500.72"> 
    <title>Untitled-9</title> 
    <g id="border"> 
     <path d="M225.64,495.55a33.25,33.25,0,0,1-16.6-4.44L29.94,387.72A33.29,33.29,0,0,1,13.33,359V152.16a33.29,33.29,0,0,1,16.6-28.74L209,20a33.25,33.25,0,0,1,33.21,0l179.1,103.38a33.29,33.29,0,0,1,16.61,28.74V358.93a33.26,33.26,0,0,1-16.63,28.81L242.24,491.11A33.26,33.26,0,0,1,225.64,495.55Z" 
     transform="translate(-2.97 -5.19)" style="fill:#141516" /> 
     <path d="M225.64,25.9A22.84,22.84,0,0,1,237.06,29l179.1,103.38a22.87,22.87,0,0,1,11.43,19.77V358.93a22.78,22.78,0,0,1-11.43,19.82L237.06,482.14a22.89,22.89,0,0,1-22.85,0L35.11,378.75A22.87,22.87,0,0,1,23.69,359V152.16a22.87,22.87,0,0,1,11.43-19.77L214.21,29a22.84,22.84,0,0,1,11.43-3.06m0-20.71A43.62,43.62,0,0,0,203.85,11L24.75,114.45A43.67,43.67,0,0,0,3,152.16V359a43.67,43.67,0,0,0,21.78,37.71l179.1,103.39a43.61,43.61,0,0,0,43.57,0L426.48,396.71a43.64,43.64,0,0,0,21.82-37.78V152.11a43.67,43.67,0,0,0-21.78-37.71L247.42,11a43.61,43.61,0,0,0-21.78-5.83h0Z" 
     transform="translate(-2.97 -5.19)" style="fill:#ff0000" /> 
    </g> 
    <path d="M275.94,173.55H175.33a31.73,31.73,0,0,0-31.69,31.69V305.86a31.73,31.73,0,0,0,31.69,31.69H275.94a31.73,31.73,0,0,0,31.69-31.69V205.24A31.73,31.73,0,0,0,275.94,173.55Zm9.09,18.9h3.62v27.8l-27.7.09-0.09-27.8Zm-82.8,46.27a28.82,28.82,0,1,1-5.46,16.83A28.84,28.84,0,0,1,202.23,238.71Zm89.43,67.14a15.73,15.73,0,0,1-15.72,15.71H175.33a15.73,15.73,0,0,1-15.72-15.71V238.71H184.1a44.85,44.85,0,1,0,83.08,0h24.49v67.14Z" 
    transform="translate(-2.97 -5.19)" style="fill:#ff0000" /> 
    </svg> 
</a>

CSS

a svg { 
    width: 6rem; 
    height: 6rem; 
    -webkit-transform: translate(0, 0); 
    transform: translate(0, 0); 
    transition: all 0.3s; 
} 

a svg:hover { 
    -webkit-transform: translate(0, -10px); 
    transform: translate(0, -10px); 
} 

a svg path#fill:hover { 
    fill: #00ffff !important; 
}

источник

2016-04-12 privateer35

ваш css не работает, потому что вы не можете навести указатель мыши на «#fill», вы используете наведение на svg, чтобы изменить заливку путей, содержащихся в svg –

Этот CSS должен работать для вас (изменить зеленый цвет в зависимости от того, цвет вы выбираете)

a svg:hover g path:last-child{ 
    fill: green !important; 
} 

a svg:hover g + path{ 
    fill: green !important; 
}

Вилка вы скрипка, вот демо https://jsfiddle.net/iamnottony/gu2e9nf3/1/

источник

2016-04-12 02:20:02

Измените ход и цвет заливки SVG при зависании

ответ

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