$(".start-page .slider .dir li").mouseover(function() {
if (!$(this).hasClass("selected")) {
var m = $(".start-page .slider .dir li");
m.removeClass("selected");
$(this).addClass("selected");
var l = $(".start-page .slider .content li");
l.removeClass("selected");
$(l.get(m.index($(this)))).addClass("selected")
}
});
$(".start-page .slider .dir li").on('mouseover touchstart', function(){
var tab = $(this),
tabContainer = $(".start-page .slider .content li");
if (!tab.hasClass("selected")) {
tab.addClass("selected").siblings().removeClass("selected");
tabContainer.eq($(this).index()).addClass('selected').siblings().removeClass("selected");
}
});
position:relative;
&:before,
&:after{
content:'';
position: absolute;
background:inherit;
display: block;
top:0;
bottom: 0;
width: 100%;
}
&:before{
right: 100%;
}
&:after{
left: 100%;
}
<div>
<svg pointer-events="none" height="30" width="20">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon"></use>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px;">
<symbol id="icon" viewBox="0 0 15 30">
<path stroke="currentColor" d="M13.5 1.5l-11.5 13.5 11.5 13.5"></path>
</symbol>
</svg>