为图片添加a标签后CSS过渡动画失效问题求助

嘿，我来帮你搞定这个hover过渡失效的问题！你遇到的情况其实很常见，主要是<a>标签的默认特性和过渡属性的写法导致的，咱们一步步来解决：

问题根源分析 #

1. <a>标签是行内元素：默认情况下，<a>是行内元素，它没有自己独立的盒子模型，即使你给里面的img设置了宽高，<a>本身的尺寸不会自动匹配img，hover的时候触发范围可能不对，而且行内元素的opacity过渡有时候不会正常生效。
2. 过渡属性写在伪类里：你把transition放在了:hover和:not(:hover)状态中，这种写法会让过渡只在触发hover的瞬间生效，离开的时候可能不会平滑过渡（虽然你写了:not(:hover)，但规范的做法是把过渡放在元素的默认样式里）。

两种可行的解决方案 #

方案一：修正<a>标签的样式和过渡写法 #

把<a>改成行内块元素，让它能承载img的尺寸，同时把过渡属性移到<a>的默认样式中：

#bottom{ 
  width: 60%; 
  margin: auto; 
  box-sizing: border-box; 
} 
@media screen and (max-width: 812px) { 
  #bottom{ width: 92%; } 
} 

/* 关键：给a标签设置inline-block，让它拥有盒子模型 */
#bottom > a {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.5s ease; /* 把过渡放在默认样式，所有状态变化都平滑 */
}

#pc2{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  float: left; 
  margin-right: 0.2%; 
} 
#pc3{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  margin-left: 0.2%; 
} 
#pc4{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  float: right; 
} 

#bottom > a:hover{ 
  opacity:0.8; 
  /* 这里不需要再写transition了，默认样式里已经定义 */
}

方案二：直接给img设置过渡效果（更直观） #

既然视觉上的元素是img，我们可以把hover效果直接绑定到img上，通过a的hover状态触发：

#bottom{ 
  width: 60%; 
  margin: auto; 
  box-sizing: border-box; 
} 
@media screen and (max-width: 812px) { 
  #bottom{ width: 92%; } 
} 

#pc2{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  float: left; 
  margin-right: 0.2%; 
  opacity: 1;
  transition: opacity 0.5s ease; /* 给img加过渡 */
} 
#pc3{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  margin-left: 0.2%; 
  opacity: 1;
  transition: opacity 0.5s ease;
} 
#pc4{ 
  padding-top: 3px; 
  width: 33.05%; 
  height: 300px; 
  box-sizing: border-box; 
  border-radius: 5px; 
  float: right; 
  opacity: 1;
  transition: opacity 0.5s ease;
} 

/* 当hover a标签时，改变里面img的opacity */
#bottom > a:hover img {
  opacity:0.8; 
}

额外小提示 #

你代码里的filter:alpha(opacity=80)是IE浏览器的旧写法，现在现代浏览器都支持标准的opacity属性，完全可以去掉啦。

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