Html 当鼠标悬停时，带有CSS背景图像的链接会跳转

正如标题中所说，我的CSS悬停图像有一个小问题

在Safari和Chrome中悬停时，它们会跳跃/被挤压（有时在缩小浏览器尺寸时会消失）

它几乎看不见，因为它像1px宽，但它在这里

我认为这是由于网站的响应能力和图像缩小的事实

但当我在Firefox上试用它时，它就像一个老板一样处理它，在悬停时没有奇怪的跳跃（但是一些严重的别名，duh）

谢谢你的帮助

下面是问题的代码片段（图像为NSFW）：

a、缩写、首字母缩写、地址、小程序、文章、旁白、音频、b、大、块引号、正文、画布、标题、中心、引用、代码、dd、del、细节、dfn、div、dl、dt、em、嵌入、字段集、figcaption、数字、页脚、表单、h1、h2、h3、h4、h5、h6、页眉、hgroup、html、i、iframe、img、ins、kbd、标签、图例、li、标记、菜单、导航、对象、ol、输出、p、，pre、q、ruby、s、samp、section、small、span、strike、strong、sub、summary、sup、table、tbody、td、tfoot、th、thead、time、tr、tt、u、ul、var、video{
保证金：0；
填充：0；
边界：0；
字体：继承；
垂直对齐：基线；
}
正文，html，预处理{
颜色：#292a2c；
单词包装：打断单词；
}
.项目小组{
背景：#eaeaea；
填充：1.666667REM 0rem；
}
文章、旁白、详细信息、图表、页脚、页眉、H组、菜单、导航、章节{
显示：块；
}
a、 缩写、首字母缩写、地址、小程序、文章、旁白、音频、b、大、块引号、正文、画布、标题、中心、引用、代码、dd、del、细节、dfn、div、dl、dt、em、嵌入、字段集、figcaption、图、页脚、表单、h1、h2、h3、h4、h5、h6、页眉、hgroup、html、i、iframe、img、ins、kbd、标签、图例、li、标记、菜单、导航、对象、ol、输出、p、pre、q、，ruby、s、samp、section、small、span、strike、strong、sub、summary、sup、table、tbody、td、tfoot、th、thead、time、tr、tt、u、ul、var、video{
保证金：0；
填充：0；
边界：0；
字体：继承；
垂直对齐：基线；
}
.project panel.pp.a{
显示：内联块；
}
.集装箱{
最大宽度：1290px；
}
@媒体屏幕和屏幕（最小宽度：1170px）
.container流体、.container、.admin容器{
填充：0 3.33333雷姆0 3.33333雷姆；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
.admin容器、.container、.container流体{
右边距：自动；
左边距：自动；
填充：0 1.66667rem；
}
.admin容器、.container{
最大宽度：1230px；
宽度：100%；
}
*，：之后，：之前{
框大小：继承；
}
正文，html{
字号：18px；
线高：1.66667；
字体系列：“开放式Sans”、Arial、Sans serif；
框大小：边框框；
宽度：100%；
最小高度：100%；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
@媒体屏幕和屏幕（最小宽度：1170px）
.行{
左边距：-15px；
右边距：-15px；
}
.grid行，.row{
flex：自动；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.admin行、.grid行、.row{
显示器：flex；
左边距：-.83333rem；
保证金权利：-.83333rem；
}
.project panel.pp{
线高：0；
字号：0；
}
@媒体屏幕和屏幕（最小宽度：1170px）
.column、.grid column{
左侧填充：15px；
右侧填充：15px；
}
[data breakpoint=md][data md width='2']，[data breakpoint=lg][data lg width='2']，[data breakpoint=xl][data xl width='2']，[data xl width='2']{
宽度：16.66667%；
最大宽度：16.66667%；
flex:0自动；
弹性基准：16.66667%；
}
.project panel.pp-thumb-img{
最大宽度：100%；
宽度：100%；
高度：自动；
}
.project panel.pp.a{
显示：内联块；
}
正文：：之后{
位置：绝对；宽度：0；高度：0；溢出：隐藏；z索引：-1；
内容：网址(https://couill.art/wp-content/uploads/2018/05/logo-Couillart.gif)网址(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif)网址(https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif)网址(https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-1.gif)网址(https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim.gif)网址(https://couill.art/wp-content/uploads/2018/05/logo-Couillart-blanc.gif);
}
.project panel.pp.a{
显示：内联块；
}
.project panel.pp拇指a:悬停>img{
可见性：隐藏；
}
.project panel.pp thumb a[title=“危险区域”]{
背景：url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif)不重复；
背景尺寸：包含；
}
.project panel.pp thumb a[title=“Dangerz”]{
背景：url(https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif)不重复；
背景尺寸：包含；
}
.project panel.pp thumb a[title=“Danger II”]{
背景：url(https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-1.gif)不重复；
背景尺寸：包含；
}
.project panel.pp thumb a[title=“About”]{
背景：url(https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim.gif)不重复；
背景尺寸：包含；
}
.页脚定制{
页边距顶部：0！重要；
页边距底部：0！重要；
文本对齐：居中；
}

动画

动画

动画

动画

动画

关于

您的预加载技术是可靠的，但是您需要删除

：hover的声明中url的双斜杠

浏览器（Chrome）将其视为不同的图像：

https://cou
  .project-panel .pp-thumb a[title="Danger Zone"] {
    background: url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif) no-repeat;
    background-size: contain;
  }

  .project-panel .pp-thumb a[title="Danger Zone"] {
    background: url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif) no-repeat;
    background-size: contain;
  }
  .project-panel .pp-thumb a[title="Dangerz"] {
    background: url(https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
    background-size: contain;
  }
  .project-panel .pp-thumb a[title="Danger II"] {
    background: url(https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-1.gif) no-repeat;
    background-size: contain;
  }
  .project-panel .pp-thumb a[title="About"] {
    background: url(https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim.gif) no-repeat;
    background-size: contain;
  }