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

Question

我有一个 div，我想在悬停时移动它。但是，此 div 下面的所有内容也会移动。我只希望 div class="plantools"在悬停时移动，而不是它下面的所有其他内容。我该如何阻止这种情况发生。请看 fiddle here .

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 Demo

.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);
}

---

• 请注意，使用transform 会保留一些browser support issues , 但使用 transitions 也是如此而且您已经在使用它了。