I’m trying to make the cursor change to a pointer while hovering over SVG’s on my website. But for some reason when I jump between them the cursor looks very weird. Any ideas what might be causing this and how to resolve it?
I’m using Firefox and I see two horizontal bars appearing when I go back and forth with my cursor over the three SVG’s on the right. The faster I move, the easier it is to see those horizonal lines.
Here’s a jsfiddle I put together showing the issue: https://jsfiddle.net/ztr4scfu/
.right > div > svg:hover {
cursor: pointer;
fill: orange;
}
I copied those SVG codes/paths from another website, and they do not have that issue. I do not have that issue when I remove the hover effect.
2
Answers
What you can do to make it look like normal is
I guess your issue is that the cursor between the icons is text, this should fix it.
You can simplify your HTML