Скройте содержимое HTML, наведя курсор на какой-либо элемент SVG. ⇐ Html

[Anonymous]

Я пытаюсь скрыть и показать некоторый тег абзаца HTML при наведении курсора на компонент в SVG.
SVG (graphic.svg):

Код: Выделить всё

HTML:

Код: Выделить всё

  



this is a hidden text, should only appear when hover over red circle

CSS (styles.css):

Код: Выделить всё

.item {
display:none;
}
.redcircle:hover .item{
display:block;
}

Абзац в HTML скрыт, поэтому CSS работает нормально. также наведение курсора в SVG работает само по себе, но не делает абзац видимым в html.
Будем благодарны за любую помощь.

Подробнее здесь: https://stackoverflow.com/questions/698 ... vg-element