html - 防止其他 div 在悬停时移动

Question

我有一个 div 我想在悬停时移动。但是，这个 div 下面的所有东西也会移动。我只希望 div class="plantools" 在悬停时移动，而不是它下面的所有其他东西。我该如何阻止这种情况发生。请看这里的小提琴。

HTML：

<div id="home-plantools-col">
 <div class="plantools">
    <p>content</p>
</div>
</div>

<div id="homemidcontent">
 <div id="home-dir-left">Test</div>
</div>

CSS：

#home-plantools-col {
width:20%;
padding:5px;
}

.plantools {
background: red;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}

.plantools:hover {
margin-top: -10px;
}

Answer 1

使用transform代替margin

jsFiddle 演示

.plantools {
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
}
.plantools:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

---

• 请注意 using存在transform一些浏览器支持问题，但 using也存在transitions并且您已经在使用它。

Answer 2

如果你知道它需要的高度，那么一种讨厌的肮脏方法是使用 wrap div：

<div id="wrapper">
<div id="home-plantools-col">
    <div class="plantools">
        <p>content</p>
    </div>
</div>
</div>

并将包装的高度设置为固定值：

JsFiddle 演示

Answer 3

只需将“position:relative”添加到 .plantools 并在 .plantools:hover 中将“margin-top:-10px”更改为“top:-10px”。

这样，元素将向上移动，但在流中保持相同的位置。

在这里看小提琴

这是更新的 css ：

#home-plantools-col {
width:20%;
padding:5px;
}
.plantools {  
position:relative;
background: red;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.plantools:hover {
top: -10px;
}

Answer 4

我个人认为它更容易使用

.plantools {
    background: red;
    position:relative;
    -webkit-transition: top 0.2s ease-in-out;
    -moz-transition: top 0.2s ease-in-out;
    -o-transition: top 0.2s ease-in-out;
}
.plantools:hover {
    top:-10px;
}

我使用ease-in-out只是因为我更喜欢它，但你仍然可以使用ease-out

JSFIDDLE