0

ホバーで移動したい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;
}
4

4 に答える 4

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);
}
于 2013-10-09T13:26:35.787 に答える
0

個人的には使いやすいと思います

.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

于 2013-10-09T13:39:07.700 に答える
0

それを行う厄介な汚い方法は、必要な高さがわかっている場合、ラップ div を使用することです。

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

ラップの高さを固定したものに設定します。

JsFiddle デモ

于 2013-10-09T13:29:51.727 に答える
0

「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;
}
于 2013-10-09T13:37:29.893 に答える