Html 以透明png精灵作为背景图像的列表单击“小故障”

我正在使用一个带有透明背景的png精灵作为列表中的按钮艺术

.single-pdsh #navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: .15;
    transition: 0.3s;
}
.single-pdsh #navlist li:hover,
.single-pdsh #navlist li:active,
.single-pdsh #navlist li:visited {
    opacity: .25;
}
.single-pdsh #navlist li, .single-pdsh #navlist a {
    height: 75px;
    width: 75px;
    display: block;
}
.single-pdsh li#prev {
    position: absolute;
    top: 50%;
    left: 5px;
    background: url('https://kidconqueror.com/wp-content/themes/twentytwentyone-child/images/nav_sprite_800x800.png');
    background-size: 300px 300px;
    background-position: -10px 0px;
    background-repeat: no-repeat;
}

按钮按预期工作。几乎。悬停触发设计的不透明度转换

但是，单击按钮后，在页面转换之前，将显示列表项的背景。为了清楚起见，我在这里有点夸张了

为什么会这样

故障截图：

精灵按钮艺术png：

---

奇怪的是，我从基于《二十一世纪》的Wordpress子主题切换到基于WP Bootstrap Starter的主题，奇怪的效果消失了。除了可能bootstrap代表了一个更现代的代码库之外，不知道为什么？

Hello@markw给定的链接不包含任何内容是的，一点也不奇怪，wp站点被设置为私有。已编辑url。