Hovering over a path in a SVG


#1

Im trying to get the line in
image
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">
...
...
</a>

and added this style,

<style>
.connection:hover st11 { stroke: red: }

</style>

what did I do wrong?


#2

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


#3

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


#4

how do I find out whats overriding it


#5

The browser’s Inspect tools.


#6


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


#7

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.


#8

Hi there lurtnowski,

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

coothead


#9

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