html - 悬停时带有 CSS 背景图像的链接会跳转
问题描述
正如标题中所说，我的 CSS 悬停图像有一个小问题。
当悬停在 Safari（缩小浏览器时有时会消失）和 Chrome 时，它们会跳跃/被挤压。
它几乎看不到，因为它像 1px 宽，但它就在这里。
我假设这是由于网站的响应能力以及图像尺寸缩小的事实。
但是当我在 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>解决方案
您的预加载技术是可靠的，但您需要从:hover.
浏览器 (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，其可见性设置为hidden，然后显示后面的动画而不会闪烁。
这是相关的工作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;
}
推荐阅读
- c++ - 如何从 C++ 代码运行自定义 GPU tensorflow::op？
- sql - 在 App 脚本中编写大查询
- c# - 如何使用 PEM 密钥在 C# 中签名/加密 JWT？
- .net - 如何在 .Net 中使用 Realm 存储自定义类型
- javascript - node.js 客户端在连接后立即断开连接
- less - 即使 alpha 通道为 1，rgba() 中的颜色也更少
- powershell - 外出时的 Powershell 脚本
- javascript - 如何在 Javascript 数组中添加 HTML 标记
- android - Android - 像 UICollectionView
- javascript - 使用 FabricJS 和 OffscreenCanvas 与工作者 HTML5 一起工作