Как сделать ваш flexbox зависшим и гибким на мобильных устройствах

Question

Я создаю веб-сайт со свойством flexbox. Однако я хотел бы, чтобы, когда пользователь наводит курсор на поля, я хотел бы, чтобы цвет поля менялся, а на мобильном устройстве я хотел бы, чтобы поля корректировались соответствующим образом.

Вот мой код и моя попытка:

HTML:

<div id="site-features" class="features-box">
 <a href="#"><h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

 <a href="#"><h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

<a href="#"><h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

CSS:

.features-box {
    margin: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1560px;
    height: 380px;
    background-color: rgb(6, 67, 122);
    padding: 5px;
    /* this */
}

.features-box>a {
    text-decoration: none;
    flex: 1 1 auto;
    border: 5px rgb(255, 255, 255) solid;
    margin: 5px;
    width: 500px;
    background-color: brown;
    height: 250px;
    position: relative;
    text-align: center;
    color: white;
}

.features-box>a:hover {
    color: green;
}

Проблема в том, что при наведении курсора он нацелен только на текст, а не на само поле . Как мне исправить это, чтобы настроить таргетинг на поля, а не на ссылку, поскольку я хотел бы, чтобы ссылка была нацелена на поле, а не только на текст

Answer 1

Сделать это можно следующим образом -

.features-box {
  margin: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(6, 67, 122);
  padding: 5px;
  /* this */
}

.features-box>a {
  text-decoration: none;
  flex: 1 1 auto;
  border: 5px rgb(255, 255, 255) solid;
  margin: 5px;
  width: 200px;
  background-color: brown;
  height: 250px;
  position: relative;
  text-align: center;
  color: white;
}

.features-box>a:hover {
  color: green;
  background-color: yellow ;
}

<div id="site-features" class="features-box">
  <a href="#">
    <h3>My heading 3 - one</h3> <img src="/assets/img1.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - two</h3> <img src="/assets/img2.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - three</h3> <img src="/assets/img3.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - four</h3> <img src="/assets/img4.png" height="95px" alt="read out"></a>

  <a href="#">
    <h3>My heading 3 - five</h3> <img src="/assets/img5.png" height="95px" alt="read out"></a>
</div>

Я добавил background-color:yellow в css, который поможет вам изменить цвет фона карточек, а не только цвет текста. Кроме того, я удалил ширину flexbox и сделал его обертыванием, что помогает сохранить гибкость макета, и он будет регулироваться в соответствии с размерами экрана.

Answer 2

    color: green;
    background-color:
}

Для мобильной настройки Вы указали специфицированную c ширину для вашего класса .features-box Итак, для этого вы можете указать

.features-box{
width:100%;
Flex-wrap:wrap;
}

Answer 3

pythonista,

для изменения цвета окна необходимо установить фон. (цвет относится к тексту).

.features-box>a:hover {
  background: green;
  color: white;
}