Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > картинка перекрывает ссылку


Автор: aspirin545 13.1.2016, 19:37
Здравствуйте, товарищи! Подскажите пожалуйста.
При наведении курсора на ссылку появляется картинка, но она перекрывает другие ссылки. 
Как я понял в 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>



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

Автор: Angel_666 14.1.2016, 10:46
Как вариант background-image

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com/kartinka-perekryvayet-ssylku-id56967da7ae20155b288b4568#findElement_E7045_5697524aae20153418f98a16_0

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)