英文:

CSS SVG on hover causes cursor bug

问题 {#heading}

我正在尝试在我的网站上将光标在悬停在SVG上时更改为指针。但是由于某种原因，当我在它们之间切换时，光标看起来非常奇怪。有什么可能导致这种情况以及如何解决呢？

我正在使用Firefox，当我在右侧的三个SVG上来回移动光标时，会出现两个水平线。我移动得越快，就越容易看到那些水平线。

这里是我创建的一个jsfiddle，展示了这个问题：https://jsfiddle.net/ztr4scfu/

.right > div > svg:hover {
  cursor: pointer;
  fill: orange;
}

我从另一个网站复制了这些SVG代码/路径，它们没有这个问题。当我移除悬停效果时，我就没有这个问题。 英文:

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.

答案1 {#1}

得分: 1

你可以这样做，使其看起来正常：

.right:hover {
  cursor: default;
}

我猜你的问题是图标之间的光标是文本，这应该解决它。 英文:

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.

答案2 {#2}

得分: 0

你可以简化你的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 a11.58 0 019.3 3.46c4.08-1.87 8.78-1 12.7 2.16 3.92-3.21 8.62-4 12.70-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.20z"></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>

英文:

You can simplify your HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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>
`

<!-- end snippet -->