Срочно. Появление двух блоков, при наведении на блок2

Тема в разделе "Верстка", создана пользователем kabasik, 9 янв 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. kabasik

    kabasik Полиционер

    Регистр.:
    15 мар 2012
    Сообщения:
    223
    Симпатии:
    68
    Привет дорогой форумчан, мне нужна твоя помощь!

    Подскажи пожалуйста как реализовать плавный выезд блок с под другого блока при наведении на него
    Вот здесь лежит то что нужно, только мне нужно чтобы еще один блок выезжал налево.


    Кто поможет реализовать, скину на пиво. :friends:
     
  2. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Вот. <span id="down"> выежает вниз, а <span id="left"> выежает влево.
    Фактически дописал только селектор
    .right-arrow-grow:hover span#down {
    top: 100%; }

    HTML:
    <button class="right-arrow-grow">right arrow grow <span id="left">Left</span>
    <span id="down">Down</span>
    </button>
    
    Код:
    body {
      margin: 40px auto;
      width: 40%;
      font: 62.5% arial, helvetica, sans-serif;
      text-align: center;
    }
    
    
    button {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
    
      display: inline-block;
      position: relative;
      border: 2px solid black;
      width: 100%;
      height: 3.3333em;
      font-size: 1.2em;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      line-height: 3.3333em;
      vertical-align: middle;
      color: black;
      z-index: 1;
      overflow: hidden;
      background: #eee;
    }
    
    /**
    * RIGHT-GROW
    **/
    .right-arrow-grow {
      width: 30%;
      overflow: visible;
      z-index: auto;
      border-right: none;
    }
    
    .right-arrow-grow span {
      display: block;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: 0;
      z-index: -1;
      width: 100%;
      border: 2px solid black;
      color: white;
      background: black;
    
      -o-transition: all .5s;
      -ms-transition: all .5s;
      -moz-transition: all .5s;
      -webkit-transition: all .5s;
      transition: all .5s;
    }
    
    .right-arrow-grow span:after {
      content: '';
      display: block;
      position: absolute;
      top: -2px;
      right: -42px;
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-left-color: black;
    }
    
    .right-arrow-grow:hover span#left {
      left: 100%;
    }
    
    .right-arrow-grow:hover span#down {
      top: 100%;
    }
     
    kabasik нравится это.
  3. kabasik

    kabasik Полиционер

    Регистр.:
    15 мар 2012
    Сообщения:
    223
    Симпатии:
    68
    Спасибо, что дали правильное направление. Запилил. Скиньте в ЛС кошелек
     
    NoName013 нравится это.
  4. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Скинул. Спасибо :)