CSS3过渡效果兼容IE6、IE7、IE8

最新推荐文章于 2022-05-06 08:41:02 发布

盒子豪

最新推荐文章于 2022-05-06 08:41:02 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_36004743/article/details/78839859

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何实现CSS3过渡效果，并重点介绍了兼容性问题，包括支持IE6、IE7、IE8等老版本浏览器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    .box{
        width:120px;height:40px;background:yellowgreen;line-height:40px;transition:width 1s;cursor:pointer;
    }
   .box:hover{
        width:180px;
    }
</style>

<div class="box">Hello World</div>

 <!--[if lte IE 8]> 
        <style>
            .box:hover{
                width:100px\9;
            }
        </style>
        <script>
            $(function(){
                $(".box").hover(function(){
                    $(this).animate({width:180},500)
                },function(){
                    $(this).animate({width:120},500)
                });
            });
        </script>
   <![endif]-->

该过渡效果兼容各个浏览器，比如IE5，IE6，IE7，IE8等。