Question

我有一组div个动态插入到包裹div中。
最终产品类似于OSX中的Dock。

我的问题是如何在任何情况下只转换鼠标悬停下的div？最好只使用CSS。

这是问题的JSFiddle。

这是HTML结构：

<div class="dock">

    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS：

.dock{
  display:relative;
  padding:5px;
  position:fixed;
  bottom:0;
  left:50%;
}

.dock div{
  width:64px;
  height:64px;
  background:black;
  float:left;
  transition: margin-bottom 0.5s;
}
.dock div:hover{
  margin-bottom:10px;
}
.dock div:nth-child(n+2){
  margin-left:5px;
}

.dock:after{
  content:"";
  background:green;
  position:absolute;
  bottom:0;
  left:0;
  height:42px;
  width:100%;
  z-index:-1;
}

要明确：
现在正在徘徊在任何一个div上，所有四个div都过渡了。我的目标是只转换滞留的div，而不是所有的div。

Answer 1

div正在向上移动，因为它们与父元素的顶部对齐，并且您在一个底部添加了边距，扩展了父元素。

考虑这样做：

.dock div{
  width:64px;
  height:64px;
  background:black;
  float:left;
  margin-top: 10px;
  transition: margin-top 0.5s;
}
.dock div:hover{
  margin-top:0px;
}

...即删除顶部的边距，而不是在底部添加边距。

使用CSS仅转换一个div

1 个答案: