SVG 将光标从 `cursor:wait` 更改为例如`cursor:help` 在悬停 n 秒后（工具提示的加载时间）没有脚本？

Question

在此站点上使用 before 更改光标有一个问题，但它 asked for a solution using Javascript，并且没有具体说明何时触发更改光标的操作。

我的问题是关于 SVG 和 CSS/SMIL 没有使用其他脚本语言，例如 Javascript.

当悬停在某个对象上时，如何将光标从cursor:wait变为例如cursor:help？将鼠标悬停在对象上一定秒数后，应该会触发更改。

用例在下面的最小片段中清楚地呈现。

MWE 片段

#MOUSE_OVER_THESE{
  cursor:wait;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="250"
  height="175"
  viewBox="0 0 250 175">

<text font-size="10" x="10" y="20">
<tspan
  x="10" dy="0">Hover over the objects below. Can the cursor</tspan><tspan
  x="10" dy="12">change from "cursor:wait" into e.g. "cursor:help"</tspan><tspan
  x="10" dy="12.5">after about 1 second, (which will be right</tspan><tspan
  x="10" dy="12.5">about when the tooltip appears on certain</tspan><tspan
  x="10" dy="12.5">browsers) without using any scripting language?</tspan></text>

<g id="MOUSE_OVER_THESE">

<rect x="50" y="100" width="60" height="50" fill="red">
<title>This is a tooltip.</title>
</rect>
<rect x="150" y="100" width="60" height="50" fill="blue">
<title>This is another tooltip.</title>
</rect>

</g>

</svg>

我无法使用 Javascript 等脚本语言，所以我想知道是否有更原生的 SVG CSS/SMIL 方法。

Answer 1

这是一个使用过渡和隐藏元素的技巧。

更新

需要稍微移动鼠标才能看到光标的变化

.hide {
  transition:1s visibility 1s;
  cursor:wait;
}
.hide:hover {
  visibility:hidden;
}

#MOUSE_OVER_THESE {
    cursor:help;
}
#MOUSE_OVER_THESE:hover + .hide {
  display:none;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="250"
  height="175"
  viewBox="0 0 250 175">

<text font-size="10" x="10" y="20">
<tspan
  x="10" dy="0">Hover over the objects below. Can the cursor</tspan><tspan
  x="10" dy="12">change from "cursor:wait" into e.g. "cursor:help"</tspan><tspan
  x="10" dy="12.5">after about 1 second, (which will be right</tspan><tspan
  x="10" dy="12.5">about when the tooltip appears on certain</tspan><tspan
  x="10" dy="12.5">browsers) without using any scripting language?</tspan></text>

<g id="MOUSE_OVER_THESE">
<rect x="50" y="100" width="60" height="50" fill="red">
<title>This is a tooltip.</title>
</rect>
<rect x="150" y="100" width="60" height="50" fill="blue">
<title>This is another tooltip.</title>
</rect>
</g>
<rect class="hide" x="50" y="100" width="160" height="50" fill="transparent"></rect>

</svg>

SVG 将光标从 `cursor:wait` 更改为例如`cursor:help` 在悬停 n 秒后（工具提示的加载时间）没有脚本？

SVG change cursor from `cursor:wait` into e.g. `cursor:help` after hovering n seconds (loading time for tooltip) without scripting?

css

svg

tooltip

svg-animate

MWE 片段