hover实现手风琴动画和bug的解决

最新推荐文章于 2022-02-28 16:30:43 发布

sweetllh

最新推荐文章于 2022-02-28 16:30:43 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sweetllh/article/details/70226801

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

每个图片放在li里面；然后左浮动。
给li宽度，img超出li的隐藏；li的宽度不等，但和等于ul的宽度;其中一个li的宽度等于图片的，li超出ul的隐藏；
当ul:hover,li的宽度都为128px；当li:hover,li的宽度为图片的宽度；
bug文章后面展示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>transition</title>
        <style type="text/css">
            body,ul,li,img{
                padding: 0;
                margin: 0;
            }

            ul,li{
                list-style-type: none;
            }

            img{
                display: block;
            }

            body{
                width: 100%;
            }

            ul{
                width: 1280px;
                height:350px;
                margin: 100px 50px;
                overflow: hidden;
            }

            li{
                height: 350px;
                width: 128px;
                float: left;
                overflow: hidden;
                transition: all 3s;
            }

            ul li:nth-child(2){
                width: 640px;
            }

            ul:hover li{
                width: 128px;
            }

            ul li:hover {
                width: 640px;
            }

        </style>
    </head>
    <body>
        <ul>
            <li> <img src="img/1.jpeg" alt="" /> </li>
            <li><img src="img/2.jpg" alt="" /> </li>
            <li><img src="img/3.jpg" alt="" /> </li>
            <li><img src="img/4.jpg" alt="" /> </li>
            <li><img src="img/5.jpeg" alt="" /> </li>
            <li><img src="img/6.jpg" alt="" /> </li>
        </ul>
    </body>
</html>

单张图展示；
这里写图片描述

这里写图片描述

效果图，被鼠标hover的li,li里的图片展示；
这里写图片描述

这里写图片描述

bug:当鼠标触到到ul的空白处时，图片的宽度都为128px.
把ul转化为行内块（ul{display:inline-block;}）,bug就可以解决了。
这里写图片描述

sweetllh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hover实现手风琴动画和bug的解决

每个图片放在li里面；然后左浮动。给li宽度，img超出li的隐藏；li的宽度不等，但和等于ul的宽度;其中一个li的宽度等于图片的，li超出ul的隐藏；当ul:hover,li的宽度都为128px；当li:hover,li的宽度为图片的宽度；bug文章后面展示。<!DOCTYPE html><html> <head> <meta charset="utf-8" /
复制链接

扫一扫