如何解决响应式网站中链接内图片:hover样式的显示异常问题？

我帮你分析了下当前遇到的问题，Chrome里的hover闪烁和Safari完全无响应的情况，主要是现有CSS写法里的两个关键问题导致的：

1. Chrome闪烁原因：你在img:hover时把display从inline-block改成了block，这种布局属性的切换会触发浏览器的重排（reflow）和重绘（repaint），直接导致视觉上的闪烁。
2. Safari无效果原因：你是在img元素上叠加背景图，但Safari会优先渲染img的src资源，完全覆盖了背景图；同时嵌套的a:hover>img选择器在Safari的渲染机制下触发优先级较低，也会导致效果不生效。

修正后的解决方案 #

我们换个思路：把a标签作为容器，hover时通过透明度过渡隐藏原始图片，同时显示a标签的背景图，这样既避免重排，又能在所有浏览器里一致生效。

修改后的CSS代码

/* 调整a标签为块级容器，确保背景图能铺满区域 */
.project-panel .pp-thumb a {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

/* 统一img的display属性，避免hover时切换导致重排 */
.project-panel .pp-thumb img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  transition: opacity 0.2s ease; /* 添加平滑过渡，提升体验 */
}

/* Danger Zone hover效果：隐藏img，显示a标签的背景图 */
.project-panel .pp-thumb a[title="Danger Zone"]:hover img {
  opacity: 0;
}
.project-panel .pp-thumb a[title="Danger Zone"]:hover {
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat center center;
  background-size: contain;
}

/* Danger II hover效果 */
.project-panel .pp-thumb a[title="Danger II"]:hover img {
  opacity: 0;
}
.project-panel .pp-thumb a[title="Danger II"]:hover {
  background: url(http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif) no-repeat center center;
  background-size: contain;
}

/* About hover效果 */
.project-panel .pp-thumb a[title="About"]:hover img {
  opacity: 0;
}
.project-panel .pp-thumb a[title="About"]:hover {
  background: url(http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif) no-repeat center center;
  background-size: contain;
}

/* 保留你原有的其他样式 */
.pp-thumbs {
  margin-top: 1.666666666666667rem;
}
.project-panel .pp-thumb {
  margin: auto !important;
}

额外优化：预加载hover图片

为了彻底避免因为图片加载导致的闪烁，你可以添加一段JS提前预加载hover时用到的GIF：

// 预加载所有hover状态的图片
const hoverImageUrls = [
  'http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif',
  'http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif'
];

hoverImageUrls.forEach(url => {
  const preloadImg = new Image();
  preloadImg.src = url;
});

这样修改后，Chrome不会再出现闪烁，Safari也能正常显示hover效果啦～

内容的提问来源于stack exchange，提问作者Bolos