Hovering over a path in a SVG


Im trying to get the line in
to have a hover effect but am lost
Here how the line is drawn

<path d="M0 711 L191.25 711" class="st11"/>

I surrounded it with an a

<a href="avaya-telephony.html" class="fid_popup connection" title="AVAYA to TELEPHONY">

and added this style,

.connection:hover st11 { stroke: red: }


what did I do wrong?


Is the SVG in-line coded?
Is there a more specific selector overriding it?


Yes, its all in 1 file, I’ll look and see if its being overridden.


how do I find out whats overriding it


The browser’s Inspect tools.


When I highlight the element, I dont see any :hover that would do the overwriting


You need to force the hover state, go to the a in the html and right-click - Force state - :hover.
Then an orange dot should appear next to the element.
Now inspect the path.


Hi there lurtnowski,

is there any particular reason for your showing an image,
rather than the actual code that is giving you problems? :winky:



The SVG is from visio and 8000 lines (too big)
Im just trying to add a hover effect on the path though
I did that and dont see whats the issue of he overwriting