追加跨度悬停

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;
}