У меня есть изображение, и некоторый текст будет плавать в центре изображения при наведении курсора.

Я могу заставить его плавать правильно с одним фрагментом текста в <p>,
но когда я добавляю <a> или что-то еще в <p>, кажется, что он хочет сделать отступ <a> вправо, что сдвигает предыдущий текст влево.

Я пытался установить 0 для padding, margin и т. Д. Все, что может помочь, но я до сих пор не понимаю, как и почему это происходит. Во-первых, я знаю, что <a> не является элементом уровня блока, поэтому установка его на inline ничего не делает ... хммм, кто-нибудь?

Его живая версия доступна по адресу http://g4stly.com/servers.html
(наведите курсор на изображения)

Мой код:

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}

#hightowerWrapper {
  display: inline-block;
  position: relative;
}

#hightowerText {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}

#hightowerText a {
  display: inline;
}

#hightowerText p {
  padding: 0;
  margin: 0;
}

#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}
<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>
1
Mark 28 Май 2017 в 05:25

2 ответа

Лучший ответ

Начальная настройка гибкого контейнера - flex-direction: row. Это означает, что по умолчанию гибкие элементы будут располагаться горизонтально.

Вот что происходит в вашем коде. Контейнер flex (#hightowerText) имеет несколько элементов flex (включая анонимные элементы flex ). Они выстроятся в ряд.

Переопределите значение по умолчанию с flex-direction: column для контейнера.

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}

#hightowerWrapper {
  display: inline-block;
  position: relative;
}

#hightowerText {
  flex-direction: column; /* NEW */
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}

#hightowerText a {
  display: inline;
}

#hightowerText p {
  padding: 0;
  margin: 0;
}

#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}
<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>
1
Michael Benjamin 28 Май 2017 в 10:16

Не похоже, что ваша копия (текст, ссылки и т. Д.) Была в теге p. Положить его в один элемент работает. Смотрите Fiddle ниже.

<div id="hightowerWrapper">
    <a href="#" id="hightowerA">
        <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

        <div id="hightowerText">
            <p>

      Hightower!
                Classic plr_hightower map!<br>
                IP Address: hightower.g4stly.com<br>
        Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
          </p>
        </div>
    </a>
</div>

https://jsfiddle.net/35mu07ts/

2
Sean Gregory 28 Май 2017 в 02:30