悬停时，CSS背景图像的链接会跳转

时间：2018-06-07 23:05:29

标签： html css

如标题中所述，我的CSS悬停图片存在一个小问题。

当他们在Safari中徘徊时（有时它会在缩小浏览器时消失）和Chrome浏览器时，它们会被挤压/挤压。

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

我认为这是由于网站的响应性以及图像缩小的事实。

但是当我在Firefox中尝试它时，它像老板一样处理它，在悬停时没有奇怪的跳跃（但是有些严重的混淆，呃）。

感谢您的帮助。

所以这是问题的代码片段（图片是NSFW）：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您的预加载技术是可靠的，但您需要从df_cols.apply(pd.Series.pad, max(len(c) for c in cols.values())) ... cols['animals'].append(np.NaN)的声明中删除网址中的双斜杠。

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

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

修改：这可以解决Chrome上的闪烁问题，但会在Firefox上引发错误。事实证明，解决方案是您实际上并不需要定位https://couill.art//wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif元素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：

hidden

here is a live example。

相关问题
最新问题