Блог

Главная - Вопросы по программированию - Как я могу изменить положение карты наведения?

Как я могу изменить положение карты наведения?

#html #css

#HTML #CSS

Вопрос:

Я создаю игру, в которой используется карта наведения, чтобы показать стоимость обновления. Карточка наведения отображается внизу, но мне нужно, чтобы она отображалась справа от кнопки. Пожалуйста, помогите!

 lt;htmlgt;  lt;headgt;  lt;stylegt;  body {  background-image: url(https://cutewallpaper.org/21/snow-camo-background/Camo-download-free-clipart-with-a-transparent-background-.png);  background-size: 150%;  }   button {  margin-top:5px;  }   .has-hover-card {  display: inline-block;  position: relative;  }   .hover-card {  display: none;  background: #ddd;  border: 1px solid black;  padding: 10px;  position: absolute;  top: 1em;  left: 0;  white-space: nowrap;  }   .has-hover-card:hover .hover-card {  display: inline-block;  margin-top: 10px;  }  lt;/stylegt;  lt;/headgt;  lt;bodygt;  lt;buttongt;lt;span class="has-hover-card"gt;Faster engineering  lt;span class="hover-card"gt;  Cost: 100$lt;br /gt;  Production ^ 5%lt;br /gt;  lt;/spangt;  lt;/spangt;  lt;/buttongt;  lt;/bodygt; lt;/htmlgt;

Ответ №1:

Просто измените свои top и left значения для вашего абсолютного позиционирования на вашем .hover-card . Не стесняйтесь меняться, чтобы занять желаемое положение.

 lt;htmlgt;  lt;headgt;  lt;stylegt;  body {  background-image: url(https://cutewallpaper.org/21/snow-camo-background/Camo-download-free-clipart-with-a-transparent-background-.png);  background-size: 150%;  }   button {  margin-top:5px;  }   .has-hover-card {  display: inline-block;  position: relative;  }   .hover-card {  display: none;  background: #ddd;  border: 1px solid black;  padding: 10px;  position: absolute;  top: -13px;  left: 7.5rem;  white-space: nowrap;  }   .has-hover-card:hover .hover-card {  display: inline-block;  margin-top: 10px;  }  lt;/stylegt;  lt;/headgt;  lt;bodygt;  lt;buttongt;lt;span class="has-hover-card"gt;Faster engineering  lt;span class="hover-card"gt;  Cost: 100$lt;br /gt;  Production ^ 5%lt;br /gt;  lt;/spangt;  lt;/spangt;  lt;/buttongt;  lt;/bodygt; lt;/htmlgt;

Комментарии:

1. Когда я делаю кнопку большего размера, карта наведения перекрывает кнопку. Есть ли способ это исправить?

Метки: