手风琴效果代码：

　　<!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. HTTP慢速攻击

    漏洞原理 HTTP慢速攻击也叫slow http attack,是一种DoS攻击的方式.由于HTTP请求底层使用TCP网络连接进行会话,因此如果中间件对会话超时时间设置不合理,并且HTTP在发送请求的 ...

  2. STL 萃取(Traits)机制剖析

    模板特化 在将萃取机制之前,先要说明模板特化 当有两个模板类,一个是通用泛型模板,一个是特殊类型模板,如果创建一个特殊类型的对象,会优先调用特殊的类型模板类,例如: template <type ...

  3. 拓扑排序 判断给定图是否存在合法拓扑序列 自家oj1393

    //拓扑排序判断是否有环 #include<cstdio> #include<algorithm> #include<string.h> #include<m ...

  4. 使用yum时出现Error: rpmdb open failed解决方案

    一.问题描述 使用yum安装软件时出现Error: rpmdb open failed,报错信息显示rpm数据库被损坏. 二.解决方案 重建rpm数据库. [root@localhost yum.re ...

  5. [Note]Splay学习笔记

    开个坑记录一下学习Splay的历程. Code 感谢rqy巨佬的代码,让我意识到了Splay可以有多短,以及我之前的Splay有多么的丑... int fa[N], ch[N][2], rev[N], ...

  6. Java引擎

    import java.io.FileNotFoundException; import java.io.FileReader; import java.util.List; import javax ...

  7. hadoop3 配置second name node

    设置hdfs-site.xml <property> <name>dfs.http.address</name> <value>192.168.1.81 ...

  8. （搬运）使用PHPstudy在Windows服务器下部署PHP系统

    原帖地址:http://www.php.cn/php-weizijiaocheng-406175.html 这篇文章主要介绍了关于使用PHPstudy在Windows服务器下部署PHP系统,有着一定的 ...

  9. Go字符串

    1. 字符串的声明是使用 package main import "fmt" func main() { /* Go中的字符串是一个字节的切片. 可以通过将其内容封装在“”中来创建 ...

  10. ALSA driver--HW Buffer

    当app在调用snd_pcm_writei时,alsa core将app传来的数据搬到HW buffer(即DMA buffer)中,alsa driver从HW buffer中读取数据传输到硬件播放 ...