Question

我的目标是在父div中有五个左右的div。单击div时，它应该扩展到其他div。令我困惑的是如何让所述div扩展到其他div以上，所以当点击重置/后退/关闭按钮时，所有的div再次显示。

当盘旋时，div应略微扩大。

父容器是1900乘500.

我的代码：

.one {
  height: 100%;
  width: 20%;
  background-color: #ffccaa;
  float: left;
}
.two {
  height: 100%;
  width: 20%;
  background-color: #ffffcc;
  float: left;
}
.three {
  height: 100%;
  width: 20%;
  background-color: #aabbcc;
  float: left;
}
.four {
  height: 100%;
  width: 20%;
  background-color: #cccccc;
  float: left;
}
.five {
  height: 100%;
  width: 20%;
  background-color: #ff11bb;
  float: left;
}

* {margin: 0; padding: 0;}
.header {height: 50vh; width: 100vw; background-color: #000;}
.navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
.logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
.content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
.footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/file.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>       
    </head>
    
    <body>
        <div class="header">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
            <div class="five"></div>
        </div>
        <div class="navi">
            <div class="logo"></div>
        </div>
        <div class="content">
            
        </div>
        
        <div class="footer">
        
        </div>
    </body>
</html>

Answer 1

在此示例中，单击的div的宽度为100％，其兄弟的宽度已删除。 transition给出了流畅的动画效果。

在div上使用:hover伪类创建悬停。在此示例中，使用transform scale property像这样稍微缩放div：

body > div:hover {
  transform: scale(1.05);  
  cursor: pointer;
}

使用.selected:hover { transform: scale(1) }

选择时，将删除比例

工作示例

注意：我已将所有ID更改为类，并将所有重复样式压缩为body > div;身体的所有直接div子都具有相同的宽度，高度，过渡，并浮动到左侧。

$('body > div').on('click', function() {
  $(this).toggleClass('selected').siblings().toggleClass('hide');
});

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body > div {
  transition: all 0.3s;
  float: left;
  height: 100%;
  width: 20%;
}
body > div:hover {
  transform: scale(1.05);
  cursor: pointer;
}
.one {
  background-color: #ffccaa;
}
.two {
  background-color: #ffffcc;
}
.three {
  background-color: #aabbcc;
}
.four {
  background-color: #cccccc;
}
.five {
  background-color: #ff11bb;
}
.selected {
  width: 100%;
}
.selected:hover {
  transform: scale(1);
}
.hide {
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

垂直div在点击时展开和收缩

1 个答案:

工作示例