Question

我正在为网站制作地铁图块菜单，我不能使用任何JavaScript只有html和css。

问题在于滑动瓷砖和滑动方向，此外当下一个框滑动时隐藏在框下。

＃block4 - DOWN
＃block5 - UP。

#block4:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;
}
#block5:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;

关于JSFiddle的示例 - https://jsfiddle.net/werk13/7tza9yqq/

Answer 1

如果您希望块＃3浮动，则不得“更改”其周围的其他元素，因为浏览器将根据您所做的任何更改“重新定位”所有元素。

既然你说你不能在代码中使用任何JS - 我可以通过几种方式来处理它： 1.使元素固定位置。这样，当您悬停其他元素（并更改自己的样式）时，所有元素都不会改变。 2.使用“隐藏”元素。创建新元素，就像＃block4一样 - 我们将调用id＃block4dup - 相同的内容，相同的位置 - 一切都是一样的。它将具有绝对位置和不透明度：0：你想要的悬停在＃block4dup：hover上，这将改变不透明度/高度以及你需要的一切。此元素也将定位为绝对元素，因此它不会影响该页面上的其他浮动元素。

不是一个很好的解决方案（很多重复的内容），但由于你不能在这里使用任何JS，它们都会起作用并给你“好”的结果。

Answer 2

检查 this 。

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate max height */

    transition-property: all; // this dude
    transition-duration: .5s; // this dude
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}

另一个 Demo 。

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease; // right here
}
#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
  padding:5em 3em;
}

CSS过渡方向上下

2 个答案: