Recabamos por distintos espacios para regalarte la solución para tu inquietud, si tienes alguna pregunta déjanos tu pregunta y respondemos con gusto, porque estamos para ayudarte.
Solución:
Aquí hay una manera de lograr esto (ponga un bogus propiedadnone para la propiedad de transición en :hover):
#inner2
opacity:0;
transition:opacity 2000ms;
#outer:hover #inner2
opacity:1;
transition:none;
http://jsfiddle.net/j716sbav/4/
Respuesta actualizada para incorporar la sugerencia de @BoltClock. Poniendo none en lugar de una propiedad falsa es definitivamente más elegante.
Si prefiere no especificar el transition propiedad más de una vez, puede aplicar la transición a :not(:hover)pero la advertencia es que también debe intercambiar todas las demás declaraciones:
#inner2
opacity:1;
#outer:not(:hover) #inner2
opacity:0;
transition:opacity 2000ms;
Cualquiera de estos funcionará, pero si no quiere lidiar con inversiones confusas, quédese con la anulación a través de transition: none.
También tenga en cuenta que los selectores de CSS representan estados y no eventos, lo que significa que utiliza un :hover estado en lugar de eventos mouseover y mouseout; sin embargo, una transición de :hover para :not(:hover) es esencialmente la forma CSS de expresar una animación mouseout.
Si sostienes alguna desconfianza y forma de reformar nuestro artículo puedes dejar una explicación y con deseo lo estudiaremos.