Is there a way to create a fade-in/fade-out effect using CSS 3 only?

Is there a way to create a fade-in/fade-out effect on mouse over/out respectively that only uses CSS 3?

If there is, would you say that it is a good way to implement suc开发者_运维问答h an effect with CSS only or not?

To me, it seems like a presentation only issue so I'm not sure why JavaScript should be involved?

---

Are you looking for something like this: http://jsfiddle.net/hRuR9/2/ ?

It's pretty simple...

.box{
    opacity: 0.0;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
}

.box:hover{
    opacity: 1.0;
}

As for whether using it or not is a good idea, it depends on your target audience and which browsers you expect them to use or want to support. Recent versions of Safari, Chrome, and Firefox (and I believe Opera) support it. No idea about recent versions of IE, but you can pretty much forget about the older ones.