0

Есть код:

.menu-new{float:right}
a.front-link
{
display: inline-block;  
background-color: #a73329; 
border-radius: 30px;
}
.front-img{
width: 60px;
height: 60px;
display: inline-block;
}
.menu-title{
color: #fff;  
display: none;  
}
a.front-link:hover .menu-title{  
display: inline-block;
}
<div class="menu-new">
  <a class="front-link" href="#">
    <div class="front-img"><img src="https://i.stack.imgur.com/Uh5H3.png"  width="60" height="60" /></div>
    <div class="menu-title">О компании</div>
  </a>
  <a class="front-link" href="#">
    <div class="front-img"><img src="https://i.stack.imgur.com/Uh5H3.png"  width="60" height="60" /></div>
    <div class="menu-title">Продукция</div>
  </a>
</div>

Задача такая: при наведении на <a> картинка должна плавно сдвигаться влево и там показывается <div class="menu-title">, следовательно, когда курсор убираешь с <a> картинка плавно сдвигается вправо и пропадает <div class="menu-title">. Каким способом лучше реализовать с учетом правильного отображения в популярных браузерах?

1 ответ 1

1

Можно сделать примерно так:

a.front-link,
.front-img {
  /*width: 120px;*/
  width: 60px;
  height: 60px;
  background-color: #a73329;
  display: inline-block;
  /* new */
  transition-property: width;
  transition-duration: 1s;
}

a.front-link {
  position: relative;
  overflow: hidden;
}

.front-img {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 60px;
  background-position-x: right;
  /*left: 0%;
  transition-property: left;
  transition-duration: 1s;*/
}

.menu-title {
  /*width: 100%;*/
  width: 120px;
  position: absolute;
  right: 0; /* new */
  color: #fff;
  font-family: sans-serif;
  text-align: center;
}

.front-img.__1 {
  background-image: url(https://i.stack.imgur.com/Uh5H3.png);
}

.front-img.__2 {
  background-image: url(https://i.stack.imgur.com/Uh5H3.png);
}

/* new */
a.front-link:hover {
  width: 180px;
}

/*a.front-link:hover .front-img {
  left: -100%;
}*/
<div class="menu-new">
  <a class="front-link" href="#">
    <div class="menu-title">О компании</div>
    <div class="front-img __1"></div>
  </a>
  <a class="front-link" href="#">
    <div class="menu-title">Продукция</div>
    <div class="front-img __2"></div>
  </a>
</div>

UPD: обновил с плавающими элементами

11
  • Хороший вариант. Спасибо. Но нужно сделать типа: круглая иконка, а когда наводишь становить овал и справа появляется текст. А у вас в ответе ширина постоянно фиксирована. 20 мар 2019 в 21:58
  • @ВалерийЕмельянов я сделал фиксированную ширину намеренно. Потому как при изменении размеров, у вас все что справа улетает. 20 мар 2019 в 22:01
  • Отредактировал вопрос. Посмотрите пожалуйста. Нужно что бы плавно показывалось 20 мар 2019 в 22:07
  • @ВалерийЕмельянов при таком подходе пользователю все время придется ловить элементы. Когда я пытаюсь с правого пункта сразу переместить мышь на левый, то кнопки начинают ползти вправо, т.к. уменьшается правый элемент. Элементы управления должны быть жестко привязаны к позиции, иначе это вызывает массу раздражений. Там либо кнопки надо делать с фиксированными размерами, либо по другому ставить вопрос - например все кнопки должны оставаться на месте, но элемент должен расширяться, при этом конечно элемент будет заползать сверху на соседние. 20 мар 2019 в 22:34
  • Ну... На вкус и цвет... По мне и так хорошо смотрится, просто хочется что бы плавно это все работало. 20 мар 2019 в 22:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.