CSS过渡 - 仅在悬停时淡化元素

Question

是否可以进行css过渡，以便在悬停时淡化元素，但只是在鼠标离开时隐藏元素。

即悬停in =淡入0.5秒|悬停=无褪色和即时

Answer 1

是的，你可以使用CSS3转换来实现这一点。从本质上讲，你的CSS应该是这样的：

#myLink { 
    opacity: 0; 
} 

#myLink:hover { 
    opacity: 1; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

，这里是一个的jsfiddle证明：Fiddle

Answer 2

是，刚刚成立的:hover而不是链接的过渡 - http://jsfiddle.net/spacebeers/X4ZqE/

（在小提琴，该链接位于“结果”框的左上角）

#main-menu li a { 
    opacity: 0; 
} 

#main-menu li a:hover{ 
    opacity: 1;  
      transition: opacity 0.5s ease-in; /* vendorless fallback */ 
     -o-transition: opacity 0.5s ease-in; /* opera */ 
     -ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */ 
     -moz-transition: opacity 0.5s ease-in; /* Firefox */ 
    -webkit-transition: opacity 0.5s ease-in; /*safari and chrome */ 
}​