css过度菜单,使用css过渡淡出菜单的不透明度

我的问题是：

当用户将鼠标悬停在其父容器上时，我希望菜单淡入和淡出可见性。我也想用css做动画。这是代码：

HTML

Red

• Red
• Blue

SCSS

.color-dropdown {

height: 60px;

overflow: hidden;

.options {

opacity: 0;

/*

The problem - This css transition never

gets seen on mouseout, most likely because

overflow is immediately hidden.

*/

transition: opacity 0.2s linear;

}

&.expanded {

overflow: visible;

.options {

opacity: 1;

}

}

}

的CoffeeScript

colorDropdown = $('.color-dropdown')

title = $('.title h4')

colors = $('.colors li')

colorDropdown.hover ->

# Fade in the options

colorDropdown.addClass 'expanded'

, ->

# Fade out - Broken!

colorDropdown.removeClass 'expanded'

colors.click ->

# Fade out - Broken!

colorDropdown.removeClass 'expanded'

# Change the current color

title.text $(this).text()

# CSS bounce animation (using animate.css here)

title.addClass 'animated bounce'

setTimeout ->

title.removeClass 'animated bounce'

, 1000

提前致谢！