我们可以使用 Flowplayer 提供了其它的 CSS 类，继续去为播放器添加样式或者效果… （# 演示）比如播放器在暂停的时候，会添加一个 .is-paused 类 …

在播放视频的时候，.is-paused 会变成 .is-playing 类 …

鼠标放在播放器的时候，会添加一个 .is-mouseover 的类 … 鼠标离开的时候，这个类会变成 .is-mouseout ...

下面我们可以使用 .is-mouseover 这个类，去添加一个鼠标悬停在播放器上面的时候的效果 ..

.is-mouseover{
opacity:.9;
background-size:103%;
}

我们把这个样式放在 .is-poster 样式的下面 …

.is-mouseover …. 然后用 opacity .. 修改一下不透明度 … 设置为 .9 … 不透明度设置为 90% ..

再用 background-size … 设置下背影的尺寸 … 设置为 103%

这样鼠标悬停在播放器上面的时候，播放器的不透明度会变成 90% … 封面图像的背景尺寸会变成 103%

为了使用过渡效果 … 我们要改一下在 .ninghao-player 上的 transition … 这里我们设置的过渡的属性是 background …

不过我们在 is-mouseover 上使用了 opacity … 要想让这个样式也使用过渡效果 .. 可以把这个 background … 修改成 all

这样会去过渡显示所有的样式 … 不仅仅是背景相关的样式 …

保存 …

打开浏览器 ….

鼠标放在播放器上 …. 你会发现，播放器整体会有一点透明 … 并且视频封面的背影会放大一些 …

过渡到这些样式的时候，会使用一种过渡的效果….