手风琴效果代码：

　　<!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. pybind11简介

    python调用C/C++有不少的方法,如boost.python, swig, ctypes, pybind11等,这些方法有繁有简,而pybind11的优点是对C++ 11支持很好,API比较简单 ...

  2. 路飞-后台home模块

    home模块 创建home模块 """ 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd ap ...

  3. P1908 逆序对（归并排序）

    https://www.luogu.com.cn/problem/P1908 归并排序是用来求逆序对的 归并排序的思想就是分治 #include <bits/stdc++.h> using ...

  4. CentOS 7 1810版本不能使用yum 命令

    使用yum install httpd 命令安装Apache 提示错误 annot find a valid baseurl for repobase7x86_64 解决方法: 进入 ls命令寻找类似 ...

  5. Codeforces Round #620 (Div. 2)E（LCA求树上两点最短距离）

    LCA求树上两点最短距离,如果a,b之间距离小于等于k并且奇偶性与k相同显然YES:或者可以从a先走到x再走到y再走到b,并且a,x之间距离加b,y之间距离+1小于等于k并且奇偶性与k相同也输出YES ...

  6. Codeforces 1204D2. Kirk and a Binary String (hard version) (dp思路)

    题目链接:http://codeforces.com/contest/1204/problem/D2 题目是给定一个01字符串,让你尽可能多地改变1变为0,但是要保证新的字符串,对任意的L,R使得Sl ...

  7. poj 1611 :The Suspects经典的并查集题目

    Severe acute respiratory syndrome (SARS), an atypical pneumonia of unknown aetiology, was recognized ...

  8. Seekbar扩大点击区域

    //扩大点击区域private void enlargeSeekBar() { mContentView.setOnTouchListener(new OnTouchListener() {//mCo ...

  9. （BFS）1097: Yuchang and Zixiang ‘s maze

    1097: Yuchang and Zixiang ‘s maze Time Limit: 2 Sec Memory Limit: 128 MBSubmit: 863 Solved: 149   De ...

  10. Nuxt配置动态路由以及参数校验

    动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以 ...