手风琴效果代码：

　　<!DOCTYPE html>
　　<html>
   　　 <head>
      　　  <meta charset="utf-8" />
       　　 <title></title>
       　　 <style>
        　　    body,div{margin: 0;}
          　　  .box{height: 100px;}
          　　  .item{
            　　    float: left;width: 25%;
            　　    height: 100%;
             　　   transition: width 10s;
             　　   }
            　　.item:nth-of-type(1){background-color: red;}
        　　    .item:nth-of-type(2){background-color: yellow;}
        　　    .item:nth-of-type(3){background-color: pink;}
        　　    .item:nth-of-type(4){background-color: orange;}
          　　  .box:hover div{width: calc((100% - 40%) / 3);}
      　　      .box .item:hover{width: 40%;}
     　　   </style>
  　　  </head>
   　　 <body>
     　　   <div class="box">
         　　   <div class="item"></div>
       　　     <div class="item"></div>
        　　    <div class="item"></div>
         　　   <div class="item"></div>
      　　  </div>
    　　</body>
　　</html>

　　去掉红色框后，手风琴效果出错（原因在于 hover选择器分别作用父子元素的同一个属性时，当鼠标在子元素上时，父元素设置的属性值也生效了，最终以父元素的属性值的效果体现出来）

　　

　　再看一个例子（鼠标先移到box再移到box2，看到呈现的效果为 “#box:hover div”  选择器设置的属性值的 效果）：

　　<!DOCTYPE html>
　　<html>
    　　<head>
       　　 <meta charset="utf-8" />
       　　 <title></title>
      　　  <style>
        　　    #box{
         　　       width: 200px;
       　　         height: 200px;
         　　       background-color: aqua;
           　　 }
           　　 #box:hover div{
             　　   width: 100px;
             　　   background-color: red;
          　　  }
           　　 #box2:hover{
            　　    width: 50px;
        　　       background-color: blue;
          　　  }
    　　    </style>
  　　  </head>
    　　<body>
       　　 <div id="box">
            　　<div id="box2">dfdfdfd</div>
        　　</div>
   　　 </body>
　　</html>
　　先测试以上代码，再在下图中的红色箭头处加上#box 进行测试（鼠标先移到box再移到box2），结果 可想而知

　　

制作手风琴效果时发现新大陆，好吧，其实是一个bug的更多相关文章

  1. 发现护考上机考试的一个bug：附软件截图（模拟软件）

    目录: 一.文章主旨 二.问题发现的起因 三.bug(问题)描述 四.软件截图 五.我的思考 六.一点期盼 一.文章主旨: 2019年5月18.19.20日,又是一年一度的护资考试(上机考),考试前夕 ...

  2. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  3. 用Canvas制作剪纸效果

    在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...

  4. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  5. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  6. 制作动画效果：《CSS3 Animation》

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  7. 使用Unity3D自带动画系统制作下雨效果

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

随机推荐

  1. java基础(四)之this的使用

    作用: 1.使用this调用成员变量和成员函数2.使用this调用构造函数 Person.java: class Person{ String name; //成员变量 void talk(Strin ...

  2. Educational Codeforces Round 81 (Rated for Div. 2) A-E简要题解

    链接:https://codeforces.com/contest/1295 A. Display The Number 贪心思路,尽可能放置更多位,如果n为奇数,消耗3去放置一个7,剩下的放1 AC ...

  3. 208. 实现 Trie (前缀树)

    主要是记录一下这个数据结构. 比如这个trie树,包含三个单词:sea,sells,she. 代码: class Trie { bool isWord; vector<Trie*> chi ...

  4. c数据结构 -- 栈与队列

    栈和队列 ·栈和队列是两种常用的.重要的数据结构 ·栈和队列是限定插入和删除只能在表的“端点”进行的线性表 栈 只能在队尾插入,只能在队尾删除 -- 后进后出 表尾称为栈顶:表头称为栈底 插入元素到栈 ...

  5. Python_内置函数和匿名函数

    楔子 在讲新知识之前,我们先来复习复习函数的基础知识. 问:函数怎么调用? 函数名() 如果你们这么说...那你们就对了!好了记住这个事儿别给忘记了,咱们继续谈下一话题... 来你们在自己的环境里打印 ...

  6. jvm(6)：JMM

    typora-root-url: ./ CPU多核并发缓存架构 JMM(Java线程内存模型)底层实现原理 基于CPU缓存模型建立的,屏蔽掉了底层不同计算机的区别. 所有的共享变量都存储在主内存.每条 ...

  7. Go之第三方库ini

    文章转自 快速开始 my.ini # possible values : production, development app_mode = development [paths] # Path t ...

  8. Spark学习笔记1

    趁着工作业余时间,趁着内心对技术追求的热情,还是对Spark这个大数据内存计算框架动手了,毕竟人与人之间的差距都是在工作业余时间拉开的…… Spark官网:http://spark.apache.or ...

  9. codeforces div2 603 D. Secret Passwords(并查集)

    题目链接:https://codeforces.com/contest/1263/problem/D 题意:有n个小写字符串代表n个密码,加入存在两个密码有共同的字母,那么说这两个密码可以认为是同一个 ...

  10. win10图标变白的解决办法(亲测有用)

    1.首先,随便打开一个文件夹点击[查看]菜单,然后勾选[隐藏的项目]: 2.同时按下快捷键[Win]+[R],在打开的[运行]窗口中输入%localappdata%: 3.在打开的文件夹中,找到[Ic ...