css3过渡属性之手风琴效果

最新推荐文章于 2024-07-15 23:16:45 发布

写代码的小产品

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量498

点赞数 1

本文链接：https://blog.csdn.net/u014175342/article/details/56842672

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡模块手风琴效果</title>
</head>
<style>
    *{ margin: 0;padding: 0; }
   ul{
       width: 800px;
       height: 300px;
       overflow: hidden;
       margin: 100px auto;
   }
    li{
        width: 160px;
        height:300px;
        list-style: none;
        float: left;
    }
     ul:hover li {
        width: 100px;
    }
    ul li:hover {
        width: 400px;
    }
</style>
<body>
<ul>
    <li ><img src="img/ad1.jpg"></li>
    <li ><img src="img/ad2.jpg"></li>
    <li ><img src="img/ad3.jpg"></li>
    <li ><img src="img/ad4.jpg"></li>
    <li ><img src="img/ad5.jpg"></li>
</ul>
</body>
</html>

写的过程中遇到的问题：

怎么样让鼠标移入时，既要让被鼠标移入选中的li元素变宽，又要让其他li元素变窄。

ul:hover li{width:100px} //首先写当鼠标移入ul时，让所有li元素变窄；

ul li:hover{width:400px}; //再写鼠标放在哪个li元素上，哪个li元素就变宽。

这里很容易犯错，

1. 一方面的分清 ul li:hover的意思它表示ul父标签下的li标签选中时设置该li标签,而ul:hover li 表示ul选中时，设置该ul的子元素 li 标签;

2.另一方面，ul li:hover 与 ul:hover li 的位置也很重要，因为他们的权重时一样的，所有，后面设置的属性会叠代前面的属性。

写代码的小产品

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3过渡属性之手风琴效果

过渡模块手风琴效果 *{ margin: 0;padding: 0; } ul{ width: 800px; height: 300px; overflow: hidden; margin: 100px auto; } li{ width: 160px; height:300px
复制链接

扫一扫