html - 带有 CSS 背景图片的链接在悬停时跳转

Question

如标题所述，我的 CSS 悬停图像有一个小问题。

在 Safari 和 Chrome 中悬停时它们会跳动/被挤压(有时会在缩小浏览器时消失)。

它几乎看不见，因为它只有 1 像素宽，但它就在这里。

我假设这是由于网站的响应能力和图像缩小的事实。

但是当我在 Firefox 中尝试它时，它处理起来就像老板一样，悬停时没有奇怪的跳跃(但有一些严重的锯齿，呃)。

感谢您的帮助。

所以这是问题的代码片段(图片来自 NSFW):

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
body, html, pre {
    color: #292a2c;
    word-wrap: break-word;
}
.project-panel {
    background: #eaeaea;
    padding: 1.6666666666666667rem 0rem;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
.project-panel .pp-thumb a {
    display: inline-block;
}
.container {
    max-width: 1290px;
}
@media screen and (min-width: 1170px)
.container-fluid, .container, .admin-container {
    padding: 0 3.33333rem 0 3.33333rem;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.admin-container, .container, .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding: 0 1.66667rem;
}
.admin-container, .container {
    max-width: 1230px;
    width: 100%;
}
*, :after, :before {
    box-sizing: inherit;
}
body, html {
    font-size: 18px;
    line-height: 1.66667;
    font-family: 'Open Sans',Arial,sans-serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 1170px)
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.grid-row, .row {
    flex: auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.admin-row, .grid-row, .row {
    display: flex;
    margin-left: -.83333rem;
    margin-right: -.83333rem;
}
.project-panel .pp-thumb {
    line-height: 0;
    font-size: 0;
}
@media screen and (min-width: 1170px)
.column, .grid-column {
    padding-left: 15px;
    padding-right: 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'] {
    width: 16.66667%;
    max-width: 16.66667%;
    flex: 0 0 auto;
    flex-basis: 16.66667%;
}
.project-panel .pp-thumb img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.project-panel .pp-thumb a {
    display: inline-block;
}
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(https://couill.art/wp-content/uploads/2018/05/logo-Couillart.gif) url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif) url(https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) url(https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-1.gif) url(https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim.gif) url(https://couill.art/wp-content/uploads/2018/05/logo-Couillart-blanc.gif);
}
.project-panel .pp-thumb a {
    display: inline-block;
}
.project-panel .pp-thumb a:hover > img {
    visibility: hidden;
}
.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;
}
.footercustom {
    margin-top: 0 !important;
	margin-bottom: 0 !important;
	text-align: center;
}

<body>
<section class="project-panel" data-pp-gutter="yes">
				<div class="container" data-title-visibility="hidden" data-meta-visibility="hidden">
					<div class="row">
						<div class="column" data-xl-width="12">
							<p class="panel-label"><span data-font="regular"></span></p>
						</div>
					</div>
					<div class="row pp-thumbs">
						
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/danger-zone" title="Danger Zone"><img src="https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail-0-00-00-00.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/danger-zone" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
					</div>
			
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/about-duplicate-2" title="Dangerz"><img src="https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi-0-00-25-18.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/about-duplicate-2" title="Dangerz">Dangerz</a><span data-font="font_dqju2lgtu">Animation</span></p>
					</div>
			
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/danger-zone-duplicate" title="Danger Zone"><img src="https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail-0-00-00-00.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/danger-zone-duplicate" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
					</div>
			
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/about-duplicate" title="About"><img src="https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim-0-00-00-00.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/about-duplicate" title="About">About</a><span data-font="font_dqju2lgtu">Animation</span></p>
					</div>
			
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/danger-ii-duplicate" title="Danger II"><img src="https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-0-00-32-12.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/danger-ii-duplicate" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
					</div>
			
					<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
						<a href="https://couill.art/project/about" title="About"><img src="https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim-0-00-00-00.png" width="340" height="255"></a>
						<p class="pp-title"><a data-font="font_dqju2lgtu" href="https://couill.art/project/about" title="About">About</a><span data-font="font_dqju2lgtu">About</span></p>
					</div>
			
					</div>
				</div>
			</section>
</body>

Answer 1

您的预加载技术很可靠，但是您需要从 :hover 的声明中的 url 中删除双斜杠。

浏览器 (Chrome) 将它们视为不同的图像:

https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif
https://couill.art//wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif

编辑:这可以解决 Chrome 上的闪烁问题，但会导致 Firefox 上出现闪烁问题。事实证明，解决方法是您实际上不需要将 a 元素作为目标 :hover。 img 标签覆盖了 a 元素的背景，所以只需使用:

  .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;
  }

当 img 悬停时，它的可见性设置为隐藏，然后后面的动画不闪烁地显示。

这是相关的工作 CSS:

  .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;
  }

和here is a live example .