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

kabasik

Полиционер
Регистрация
14 Мар 2012
Сообщения
226
Реакции
74
Привет дорогой форумчан, мне нужна твоя помощь!

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

Кто поможет реализовать, скину на пиво. :friends:
 
Вот. <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%;
}
 
Вот. <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%;
}
Спасибо, что дали правильное направление. Запилил. Скиньте в ЛС кошелек
 
Скинул. Спасибо :)
 
Назад
Сверху