Question

我的网站上有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;}

谢谢你们......

Answer 1

只需将该div设为固定高度：

.section.blue {
    height: 350px;
}

或者如果您希望选择器更具体：

.section.blue .container .row {
    height: 270px;
}

Answer 2

试试这个：

CSS

.komp {
        display: block;
        padding: 100px 0 0;
    }

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

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

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>

我绝对定位它，然后填充内容容器，使其不会落在按钮后面。

不确定您将在何处使用此功能，但是可能值得检查仅为按钮创建保持容器，以使其更灵活：）

Answer 3

我解决了这个问题我加了一个

.komp{postition: absolute;}

出于某种原因，您需要将元素放置在此元素中。现在唯一的事情就是以图标为中心，这些图标不能与margin-left / right一起使用：auto，但我希望能找到一个。

感谢您的建议......

CSS元素推送内容

3 个答案: