Search code examples
csssvghovercursorcss-grid

CSS SVG on hover causes cursor bug

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.

Solution

  • What you can do to make it look like normal is

    .right:hover {
  cursor: default;
}

    I guess your issue is that the cursor between the icons is text, this should fix it.