SVG меняет курсор с «курсора: ждать», например, на `cursor: help` после зависания n секунд (время загрузки всплывающей подсказки) без сценариев? - PullRequest
Новая
       13

SVG меняет курсор с «курсора: ждать», например, на `cursor: help` после зависания n секунд (время загрузки всплывающей подсказки) без сценариев?

0 голосов
/ 24 июня 2018

Был вопрос об изменении курсора с помощью ранее на этом сайте, но он запросил решение с использованием 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.

1 Ответ

0 голосов
/ 24 июня 2018

Вот трюк с использованием перехода и скрытого элемента.

UPDATE

Для того, чтобы увидеть изменение курсора, нужно слегка передвинуть мышь 

.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>
...