Question

我有一个div，我想继续前进。然而，这个div下方的一切也都在移动。我只希望div class =“plantools”继续前进，而不是其下的所有其他内容。我该如何阻止这种情况发生。请参阅小提琴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也是如此，您已经在使用它了。

Answer 2

一个令人讨厌的肮脏方式，如果你知道它将采取的高度，是通过使用包裹div：

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

并将换行高度设置为固定的值：

JsFiddle Demo

Answer 3

只需在.plantools中添加“position：relative”，然后在.plantools中将“margin-top：-10px”改为“top：-10px”：hover。

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

See fiddle here

这是更新后的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

防止其他div继续进行悬停

4 个答案: