1

私のサイトにはアイコンで始まる 3 つの要素があり、ホバー時に CSS でアニメーション化しました。しかし、ホバリングすると、セクション全体が押し下げられます。アイコンに影響を与えたいだけです。これはおそらくポジショニングの問題ですが、私が知っていることをいくつか試しましたが、思い通りに機能するものは何もないようです. ところで、サイトは Bootstrap で構築されていますが、それはおそらく私の問題の一部ではありません。

サイトはここで見ることができます: http://www.vielendank.dk/bootstrap (半分下 - 青いセクション)

html は次のようになります。

<div class="span4 text-center">
<div class="komp"><div class="komp-ikon">
<i class="icon-pencil"></i></div>
<h4>Grafisk design</br>og rentegning</h4></br>
Vi elsker design! Grafisk design og rentegning er vielen danks absolutte 
spidskompetence – vi vil gå så vidt som at kalde os selv for nørder.
</div></div>

CSS は次のようになります。

.komp{
display: block;
}

.komp-ikon{
font-size: 40px;
color:#007fa7;
padding-top: 20px;
background-color: white;
width: 80px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-moz-border-radius: 6%;-khtml-border-radius: 6%;-webkit-border-radius: 6%;border-radius: 6%;

-moz-box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);

-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in; 
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;}

.komp:hover .komp-ikon{
color: #41ab29;
font-size: 60px;
padding-top: 20px;
background-color: white;
width: 100px;
height: 80px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%;


-moz-box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow:  0 1px 10px rgba(0, 0, 0, 0.3);}

.komp:hover h4{
color:#41ab29;
font-family: 'Montserrat Alternates', sans-serif;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 0px;}

みんなありがとう...

4

3 に答える 3

0

そのdivに固定の高さを与えるだけです：

.section.blue {
    height: 350px;
}

または、セレクターをより具体的にしたい場合:

.section.blue .container .row {
    height: 270px;
}
于 2013-07-09T07:01:56.323 に答える
0

追加した問題を解決しました

.komp{postition: absolute;}

何らかの理由で、この要素内に要素を配置するためにこれが必要です。現在唯一のことは、margin-left/right: auto では機能しないアイコンを中央に配置することですが、うまくいけばそれを理解します。

アドバイスをありがとう...

于 2013-07-10T05:40:42.743 に答える