鼠标移入后逐渐变换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

阅读 11.2k
1 个回答

可以使用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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
101 新手上路
子站问答
访问
宣传栏