Kredov long

[Помогите] Не срабатывает код SASS

Тема в разделе "Веб-дизайн", создана пользователем mUchenik, 9 дек 2015.

  1. mUchenik

    mUchenik

    Регистрация:
    9 дек 2015
    Сообщения:
    1
    Симпатии:
    0
    Друзья, ни как не могу понять, почему у меня не работает код...
    Точнее не работает эффект hover.
    Теперь подробнее:
    Пытаюсь сделать блоки как на этом сайте реализовано в разделе (основные услуги компании): http://www.sgs66.ru/ ... Вот что я делал:
    Стрктура html:
    HTML:
    <div  class="conteiner" id="lp-offer">
                    <div class="row">
                        <div class="col-lg-3">
                            <div>
                                <div>
                                    <p><i class="lp-icon lp-icon1"></i></p>
                                    <p>Заголовок</p>
                                    <p>Подзаголовок. Текст разный.</p>
                                    <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                        Заказать
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div>
                                <div>
                                    <p><i class="lp-icon lp-icon2"></i></p>
                                    <p>Заголовок</p>
                                    <p>Подзаголовок. Текст разный.</p>
                                    <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                        Заказать
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div>
                                <div>
                                    <p><i class="lp-icon lp-icon3"></i></p>
                                    <p>Заголовок</p>
                                    <p>Подзаголовок. Текст разный.</p>
                                    <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                        Заказать
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div>
                                <div>
                                    <p><i class="lp-icon lp-icon4"></i></p>
                                    <p>Заголовок</p>
                                    <p>Подзаголовок. Текст разный.</p>
                                    <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                        Заказать
                                    </button>
                                </div>
                            </div>
                        </div>
    
                    </div>
                </div>
    
    Код SASS:
    HTML:
    #lp-offer
        .col-lg-3
            height: 422px
            // float:
            // min-height: 1px
            // padding-left: 15px
            // padding-right: 15px
            // position: relative
    
            div
                background-color: #fff
                box-shadow: 0 0 10px rgba(100,100,100,0.3)
                height: 96.4%
                margin: 6px
                padding: 7px
              
                div
                    height: 100%
                    border: 2px solid #32d3ff
                    p:nth-child(2)
                        padding-top: 20px
                        font-size: 21px
                    p:nth-child(3)
                        padding-top: 15px
                    p
                        margin: 0 0 10px
    
    #lp-offer
      padding-bottom: 105px
      margin-top: -145px
      button
        display: none
        width: 60%
        height: 44px
        color: #fff
        font-size: 17px
        position: absolute
        left: 20%
        bottom: 67px
      .col-lg-3
        height: 350px
        > div:hover button
          display: inline-block
      > div > div > div:nth-child(2) > .col-lg-3
        height: 422px
      .lp-icon
        width: 46px
        height: 46px
        margin-top: 43px
      .lp-icon1
        background: url(../img/ico-lp-offer-46px.png)
        background-position: 0 0
      .lp-icon2
        background: url(../img/ico-lp-offer-46px.png)
        background-position: 0 -46px
      .lp-icon3
        background: url(../img/ico-lp-offer-46px.png)
        background-position: 0 -92px
      .lp-icon4
        background: url(../img/ico-lp-offer-46px.png)
        background-position: 0 -138px
      .col-lg-3
        > div
          height: 96.4%
          margin: 6px
          padding: 7px
          background-color: #fff
          box-shadow: 0 0 10px rgba(100, 100, 100, 0.3)
          > div
            height: 100%
            border: 2px solid #32d3ff
            > p
              &:nth-child(2)
                font-size: 21px
                padding-top: 27px
              &:nth-child(3)
                padding-top: 15px
        > div:hover
          > div
            border: 2px solid #fff
            color: #fff
          .lp-icon
            -webkit-filter: invert(100%)
            filter: invert(100%)
      > div > div > div:nth-child(2) > div
        &:nth-child(1) > div:hover
          background: url(../img/team/3.jpg)
          background-size: 100%
        &:nth-child(2) > div:hover
          background: url(../img/team/1.jpg)
          background-size: 100%
        &:nth-child(3) > div:hover
          background: url(../img/team/2.jpg)
          background-size: 100%
        &:nth-child(4) > div:hover
          background: url(../img/team/3.jpg)
          background-size: 100%
    
    
    
    
    
    //ALWAYS END
    @import "_media.sass"
    
    На мой (далеко не опытный взгляд), вроде бы всё должно работать, но увы... По факту, при наведении на блок, не выводятся картинки, которые должны появляться при наведении на блок, как это происходит по ссылке вышеуказаной... Расскажите что не так с кодом у меня, и дайте совет, как исправить текущее положение дел на желаемое...
    Спасибо.
    [​IMG] [​IMG]
     
    Lasted edited by : 9 дек 2015