Как сделать клик в SVG в :: before кликабельным? - PullRequest
Новая
       15

Как сделать клик в SVG в :: before кликабельным?

0 голосов
/ 06 марта 2019

У меня есть крошка, которая перечисляет путь иерархии страницы.Я спрятал первый тег привязки и изменил тег привязки ::before псевдокласс на SVG небольшого дома, например: 

li:first-child a {
    display: none;
  }

li:first-child::before {
    color: transparent;
    content: '';
    display: block;
    width: rem(16px);
    height: rem(16px);
    position: relative;
    top: rem(2px);
    margin: 0;
    background-image: url("../images/breadcrumb-image.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    &:hover {
      color: transparent;
    }
  }

Я получил эффект желания, но SVG не активен, чтобы вернуться кдомашняя страницаКакие-нибудь решения для этого?Я не возражаю против CSS или JS.

Это изображение, поэтому оно дает вам представление: enter image description here

Заранее спасибо!

1 Ответ

0 голосов
/ 10 марта 2019

Я нашел способ сделать SVG для псевдокласса ::before кликабельным через jQuery, например:

Код SCSS:

Этостиль, чтобы скрыть тег привязки и добавить SVG к тегу привязки перед псевдоклассом.

li:first-child a {
    display: none;
  }
li:first-child::before {
    color: transparent;
    content: '';
    cursor: pointer;
    display: block;
    width: rem(16px);
    height: rem(16px);
    position: relative;
    top: rem(2px);
    margin: 0;
    background-image: url("../images/breadcrumb-image.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    &:hover {
      color: transparent;
      cursor: pointer;
    }
  }

Код JavaScript: 

  //Store the href attribute(the link was already pointing to the home page) of the anchor tag in a variable
  var breadcrumbHomeLink = $('.breadcrumb__list--item:first-child a').attr('href');

  //Store the SVG with ::before pseudo-class in variable
  var breadcrumbSVG = $('.breadcrumb__list--item:first-child').before();

  //Make Breadcrumb SVG clickable & redirect to home page
  breadcrumbSVG.on('click', function(){
    location.href = breadcrumbHomeLink;
  });
...