html - 将跨度附加到悬停

Question

我怎样才能附加我的跨度也受到我的悬停过渡的影响。当鼠标悬停时，我试图从跨度中获取文本也像图像一样淡出

#grid li span {
  color: white;
  display:block;
  bottom:250px;
  position:relative;
  width:180px;
   }

#grid li {
 float: left;
 margin: 0 40px 75px 0px;
 display:inline;
 position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
    }

#grid:hover img {
 -webkit-transition: opacity .3s ease-in;
 -moz-transition: opactiy .3s ease-in;
 -ms-transition: opacity .3s ease-in;
 -o-transition: opacity .3s ease-in;
 transition: opacity .3s ease-in;
 zoom: 1;
 filter: alpha(opacity=100);
 opacity: 0.3;
   }

jsfiddle

Answer 1

修改你的CSS，让所有的li褪色。然后瞄准悬停的那个。

http://jsfiddle.net/XYZZx/13/

改变

#grid:hover img {
     ...transitions...
}

到

#grid:hover li {
     ...transitions...
}

并添加

#grid:hover li:hover {
     opacity: 1;
}