以透明png sprite为背景图像的列表单击glitch

Question

我正在使用一个具有透明背景的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：

​

​

Answer 1

奇怪的是，我从一个基于21的Wordpress儿童主题切换到一个基于WP Bootstrap启动器的主题，奇怪的效果消失了。不知道为什么，除了引导可能代表了一个更现代的代码基础？