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

我解决了我添加的问题

.komp{postition: absolute;}

出于某种原因，您需要使用它来定位此元素中的元素。现在唯一的事情是居中的图标不适用于margin-left/right：auto，但我希望能解决这个问题。

感谢您的建议...

于 2013-07-10T05:40:42.743 回答
0

只需给该 div 一个固定的高度：

.section.blue {
    height: 350px;
}

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

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

尝试这个：

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>

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

不确定您将在哪里使用它，但可能值得检查为按钮创建一个保持容器，以使其更灵活:)

于 2013-07-09T07:10:00.387 回答