0

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.

Improve this question

2 Answers 2

Reset to default
0

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.

Improve this answer
2
  • That worked wonders! But why is that required? I'm also seeing some "whitespace" on my website between the divs that has the SVG's when I inspect on my page using the firefox developer tools. Any idea what that is or how to remove it? After each div it says "whitespace" in a little box in the inspector tool. I don't plan on having text inside the "right" div anyways, so how can I get rid of all that? I only got those 3 divs that only contains SVGs
    – user21134379
    Commented Aug 10, 2023 at 11:27
  • Take a look at this: stackoverflow.com/questions/58660915/svg-unwanted-padding
    – radoczsanyi_
    Commented Aug 10, 2023 at 11:31
0

You can simplify your HTML

<style>
  .bar {
    display: flex;
    align-items: justify;
    width: 300px;
    background: lightgreen;
  }
  svg {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: pink;
  }
  svg+svg {
    margin-left: 1em;
  }
  svg:hover {
    cursor: pointer;
    fill: orange;
  }
</style>

<div class="bar">
  <svg alt="User" viewBox="0 0 44 36">
    <path d="M22 16.81a8.08 8.08 0 118.08-8.08A8.08 8.08 0 0122 16.81zm0-14.46a6.38 6.38 0 106.38 6.38A6.38 6.38 0 0022 2.35zm15 33a.85.85 0 01-.85-.85 14.15 14.15 0 00-28.3 0 .85.85 0 01-1.7 0 15.85 15.85 0 0131.7 0 .85.85 0 01-.85.85z"></path>
  </svg>
  <svg alt="Heart" viewBox="0 0 44 36">
    <path d="M22 34.35a1 1 0 01-.33-.06c-17-7-18.94-16.35-19-20A11.58 11.58 0 019.3 3.46c4.08-1.87 8.78-1 12.7 2.16 3.92-3.21 8.62-4 12.7-2.16a11.58 11.58 0 016.63 10.81c-.06 3.67-2 13-19 20a1 1 0 01-.33.08zM13.85 4.16A9.16 9.16 0 0010 5a9.86 9.86 0 00-5.64 9.23c.06 3.31 1.9 11.7 17.63 18.34 15.73-6.64 17.57-15 17.63-18.34A9.86 9.86 0 0034 5c-3.7-1.69-7.86-.83-11.42 2.36a.86.86 0 01-1.14 0 11.41 11.41 0 00-7.59-3.2z"></path>
  </svg>
  <svg alt="Bag" viewBox="0 0 44 36">
    <path d="M20.77 35.35h-9a5.6 5.6 0 01-4.42-1.86 7 7 0 01-1.19-5.08l1.9-15.91a.84.84 0 01.84-.75h23.67a.84.84 0 01.84.75l1.92 16a6.88 6.88 0 01-1.19 5 5.58 5.58 0 01-4.4 1.86zM9.66 13.45L7.83 28.66a5.24 5.24 0 00.82 3.75 4 4 0 003.12 1.24h18a4 4 0 003.1-1.24 5.27 5.27 0 00.83-3.72l-1.88-15.24zm18.06-4.12a.85.85 0 01-.85-.85 6.14 6.14 0 00-12.27 0 .85.85 0 01-1.7 0 7.84 7.84 0 0115.67 0 .85.85 0 01-.85.85z"></path>
  </svg>
</div>

Improve this answer