手风琴效果代码：

　　<!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. 中国城市区号脚本-mysql

    中国城市区号 300个. SET NAMES utf8mb4; ; DROP TABLE IF EXISTS `citycode`; CREATE TABLE `citycode` ( `codeId ...

  2. Codeforces Round #615 (Div. 3) A-F简要题解

    contest链接:https://codeforces.com/contest/1294 A. 给出a.b.c三个数,从n中分配给a.b.c,问能否使得a = b = c.计算a,b,c三个数的差值 ...

  3. IntelliJ IDEA 2017.3尚硅谷-----鼠标悬浮提示

    建议不会的直接百度取消设置

  4. Django框架介绍（二）

    1.MVC框架和MTV框架 MVC全名model view controller,是软件工程中的一种软件架构模式,把软件分为三个基本部分:模型(model).视图(view)和控制器(controll ...

  5. DE1-soc软件实验”hello_word"

    此实验需要工具:win32disk,路由器,sd卡,Embeed Design suite, Putty,usb to uart 驱动 选择文件,在拷贝到sd卡中去:烧写的文件是官方提供的SD卡的程序 ...

  6. ES6新的数据类型 generato，在AJAX中的应用

    1.next()方法会执行generator的代码,然后,每次遇到yield x;就返回一个对象{value: x, done: true/false},然后“暂停”.返回的value就是yield的 ...

  7. Codeforces C. Almost Equal (数学规律)

    题目链接:http://codeforces.com/contest/1206/problem/C 题解 : 观察可以发现当n为偶数时,1 - 2n是不满足题意的,可以举例n = 2,n = 4试一试 ...

  8. 常用的MQ命令

    删除队列管理器 dltmqm QmgrName 启动队列管理器 strmqm QmgrName 如果是启动默认的队列管理器,可以不带其名字 停止队列管理器 endmqm QmgrName 受控停止 e ...

  9. docker里面安装sqlserver2017

    首先要注意,docker一般不做数据持久化容器.如果非要安装可以参考微软官方教程: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-inst ...

  10. 第二十九篇 玩转数据结构——线段树（Segment Tree）

          1.. 线段树引入 线段树也称为区间树 为什么要使用线段树:对于某些问题,我们只关心区间(线段) 经典的线段树问题:区间染色,有一面长度为n的墙,每次选择一段墙进行染色(染色允许覆盖),问 ...