VPF::картинка перекрывает ссылку - Форум программистов

aspirin545

Дата 13.1.2016, 19:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 6.1.2016

Репутация: нет
Всего: нет

Здравствуйте, товарищи! Подскажите пожалуйста.
При наведении курсора на ссылку появляется картинка, но она перекрывает другие ссылки.
Как я понял в svg задание значения при помощи z-index не действует, а всё зависит от расположения, и чем выше элемент в коде тем тем больше его "z-index".http://codepen.io/anon/pen/YwQoXy
Как сделать так чтобы остальные ссылки при появлении картинки (либо при переводе курсора с одной ссылки на другую) не перекрывались?

Код


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="330" height="330" viewBox="-18 -15 330 330">
 
  <path id="link1" d="M20,150 A130,130 0 1,1 20,150.01" stroke="grey" fill="none" />
 
  <style>
    a image {visibility: hidden;}
    a:hover image {visibility: visible;}
    a:hover text {text-decoration: underline;}
  </style>
 
  <a xlink:href="http://www.tolstoy.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="0%">
        tolstoy.ru
      </textPath>
    </text>
  </a>
   
    <a xlink:href="http://www.ngogol.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="20%">
        ngogol.ru
      </textPath>
    </text>
  </a>
   
    <a xlink:href="http://www.antonchehov.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="40%">
      antonchehov.ru
      </textPath>
    </text>
  </a>
</svg>

Благодарю за помощь!

Angel666

Дата 14.1.2016, 10:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 0
Регистрация: 8.9.2011

Репутация: нет
Всего: 1

Как вариант background-image

Этот ответ добавлен с нового Винграда - http://vingrad.com

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »