手风琴效果代码:

  <!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. python3练习100题——026

    原题链接:http://www.runoob.com/python/python-exercise-example26.html 题目:利用递归方法求5!. 是25题递归方式的简化版所以很容易. 我的 ...

  2. Django - installing mysqlclient error: mysqlclient 1.3.13 or newer is required; you have 0.9.3

    环境 Deepin Linux 15.11 Django 2.2 pymysql0.9.3 原因 因为用pymysql替换了默认的mysqlclient,Django官方推荐的数据库API drive ...

  3. 第四十二篇 入门机器学习——Numpy的基本操作——索引相关

    No.1. 使用np.argmin和np.argmax来获取向量元素中最小值和最大值的索引 No.2. 使用np.random.shuffle将向量中的元素顺序打乱,操作后,原向量发生改变:使用np. ...

  4. ASP.NET + MVC5 入门完整教程五 --- Razor (模型与布局)

    https://blog.csdn.net/qq_21419015/article/details/80451895 1.准备示例项目 为了演示Razor,使用VS创建一个名称为“Razor”的新项目 ...

  5. 初学Java时使用记事本开发出现的中文乱码问题

    如果是使用微软记事本,那就会麻烦一点,将后缀改为.txt,用记事本打开,左上方:文件→另存为→弹出的窗口的下方会出现使用的编码形式,将编码形式修改为ANSI编码,点击保存→确定替换即可,修改后将后缀改 ...

  6. 关于MySQL的tinyint(3)问题

    mysql 中int(1)和tinyint(1)中的1只是指定显示长度,并不表示存储长度.tinyint可以存储1字节, 即unsigned 0~255(signed -127~127).显示大小不受 ...

  7. windows系统安装 ionic

    windows系统安装 ionic 参考菜鸟教程:https://www.runoob.com/ionic/ionic-install.html 命令行安装 Window 和 Linux 上打开命令行 ...

  8. jenkins发布.war包到本地tomcat

    前提:保证jenkins构建打包成功 1.配置tomcat的用户名密码(此处tomcat为本地任意tomcat包,jenkins会通过Deploy war/ear to container配置的url ...

  9. 使用@RunWith(SpringJUnit4ClassRunner.class)进行单元测试时 报错 和 java.lang.NoSuchMethodError的解决方法

    1 使用@RunWith(SpringJUnit4ClassRunner.class)进行单元测试时,需要junit高版本和spring-test的高版本才支持,junit需要4.0以上的,sprin ...

  10. golang采坑记录

    安装golang,引入第三方库,采坑 1.获取安装包 go语言中文网:https://studygolang.com/dl 官网地址:https://studygolang.com/dl 2.下载 选 ...