Как переместить текст влево при наведении?

Когда курсор мыши завис на кнопке, текст перемещается вниз, мне нужно переместить текст только влево по 5px, при наведении на кнопку, как это реализовать?

div {
  text-align: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

Редактор, пожалуйста, не меняйте CSS при форматировании

— 30.12.2018 18:40

Я не совсем понимаю. Вы хотите, чтобы текст был заблокирован по оси Y и перемещен на 5 пикселей по оси X?

— 30.12.2018 18:44

да. перемещаться только по оси x при наведении кнопки

— 30.12.2018 18:45

html css animation layout hover

30.12.2018 18:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

953

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

«Проблема», с которой вы столкнулись, заключается в том, что тип отображения элемента span является встроенным, поэтому он будет следовать за своими братьями и сестрами.

Я полагаю, что есть несколько способов решить эту проблему.

Вы можете добавить vertical-align: top; в диапазон. (Супер простое исправление css, сохраняющее HTML как есть. Обратная сторона: исправляет текст в верхней части элемента)

div {
  text-align: center;
}

span {
  vertical-align: top;
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

Чтобы действительно исправить это (отсутствие перетекания текста в верхнюю часть элемента), вам нужно добавить элемент-оболочку за пределами диапазона:

.center {
  text-align: center;
}

span {
  margin-right: 10px;
}
.wrapper {
 display:inline-block;
}
button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class = "center">
  <p class = "wrapper"><span>test</span></p><button>&#10230;</button>
</div>

Вы также можете отобразить родительский элемент как гибкий и соответственно выровнять дочерние элементы:

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class = "flex">
  <div><span>test</span></div><button>&#10230;</button>
</div>

30.12.2018 19:03

Другие вопросы по теме

HTML: несоответствующая высота панели сетки?

Vanilla JS слева направо переключает анимацию

Отображать изображения вертикально по центру, когда они отображаются в держателе

Проблемы с созданием логотипа в CSS?

Центрировать элементы в прокручиваемой области

Управляйте: до и: после с помощью javascript

CSS - изменение цвета фона Div в зависимости от цвета изображения внутри того же Div

Как создать Border на входе тд в таблице?

HTML / HP: Emogrifier превращает {} в% 7B и% 7D

Изменение размера средней части страницы с сохранением ограничений для дочерних элементов

Как переместить текст влево при наведении?

Ответы 1

Другие вопросы по теме

Похожие вопросы