CSS - 显示:无悬停自我

Question

我试图创建一个效果,如果用户将鼠标悬停在元素上,该元素将消失.我已经尝试了下面的代码,但似乎display:none;打破了CSS.我想知道为什么我的CSS不起作用,以及如何解决我的问题.

http://jsfiddle.net/2c42U/

<div class="foo">text</div> 

.foo:hover {
    color: red;
    display: none;
}

Answer 1

尝试改变元素的不透明度:http://jsfiddle.net/XtmVQ/

.foo:hover {
    opacity:0;
}