鼠标移入后逐渐变换DIV的背景色为黑色半透明，这种效果如何实现？

   html:
    <a href="#" class="c-li-1-a">
         <img src="images/ask.png" alt=""/>
         <div class="img-black"></div>
    </a>

   css:
   .c-li-1-a {
        display: block;
        width: 135px;
        height: 90px;
        float: left;
    }
    img {
        position: absolute;
    }
    .img-black {
        width: 135px;
        height: 90px;
        position: relative;
    }
    .img-black:hover {
        background-color: #000;
        opacity: 0.4;
    }

我想鼠标移入div.img-black上后此标签在2S内逐渐变换背景色为黑色半透明，效果需要怎么写？需要兼容IE6,7,8

---

可以使用transition属性.
例:
a:hover {
transition: all 0.4s ease-in-out 0s;
}

关于IE兼容

IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
-- 引用自 编码规范 by @mdo

关于兼容的更多详细信息：http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e