我有一个痕迹,列出了页面的层次结构路径。我隐藏了第一个锚标签并将锚标签::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。
提前致谢!
我找到了一种方法,可以通过jQuery在::before
伪类上进行SVG,如下所示:
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;
});