将鼠标悬停在元素上时，会出现不影响相邻相似元素的附加信息 HTML+CSS答案

【问题标题】：when hovering over an element, additional information appears that does not affect neighboring similar ones HTML+CSS将鼠标悬停在元素上时，会出现不影响相邻相似元素的附加信息 HTML+CSS
【发布时间】：2022-08-18 00:20:05
【问题描述】：

我正在学习 html 和 css，不幸的是，当我将鼠标悬停在显示隐藏元素的 div 上时遇到了困难。当您将鼠标悬停在卡片上时，它的颜色会发生变化（已经完成），卡片增加并且隐藏元素出现是必要的。但不幸的是，当我将鼠标悬停在第一张卡片上时，其他卡片的大小也会增加，尽管它们上的隐藏信息仍然隐藏。我发现的唯一解决方案是，如果您从 .services_cards 元素中删除 display:flex ，但是这些卡片的整个显示会折叠，但是当将鼠标悬停在其中一个上时它们不会增加。我试过了，通过第n个孩子我没有成功。请告诉我如何解决这个问题。为了更好地了解情况，最好在全屏模式下观看，这样我的复杂性会更容易理解。

.services__cards {
  margin-top: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}
.services__item:last-child {
  margin-right: 0;
}
.services__item:hover {
  background-color: #F78BB6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.services__item:hover .services__card-header, .services__item:hover .services__card-descr {
  color: #FFF;
}
.services__item:hover .services__learnmore {
  display: inline-block;
}
.services__card-header {
  margin-top: 38px;
  font-weight: 500;
  font-size: 34px;
  line-height: 72px;
  color: #56597A;
}
.services__card-descr {
  font-family: \"Roboto\";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #919299;
  text-align: center;
}
.services__learnmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 40px;
  display: none;
}
.services__learnmore span {
  margin-right: 5px;
}

<div class=\"services__cards\">
          <div class=\"services__item\">
            <img src=\"images/cards/card-icon1.png\" alt=\"card-icon image\">
            <h3 class=\"services__card-header\">Design</h3>
            <div class=\"services__card-descr\">a plan or drawing produced to show the look and function</div>
            <a href=\"/\" class=\"services__learnmore\"><span>Learn more</span><img src=\"images/cards/arrow.png\" alt=\"arrow image\"></a>
          </div>
          <div class=\"services__item\">
            <img src=\"images/cards/card-icon2.png\" alt=\"card-icon image\">
            <h3 class=\"services__card-header\">Development</h3>
            <div class=\"services__card-descr\">Development is defined as the process of growth or new</div>
            <a href=\"/\" class=\"services__learnmore\"><span>Learn more</span><img src=\"images/cards/arrow.png\" alt=\"arrow image\"></a>
          </div>
          <div class=\"services__item\">
            <img src=\"images/cards/card-icon3.png\" alt=\"card-icon image\">
            <h3 class=\"services__card-header\">Branding</h3>
            <div class=\"services__card-descr\">The marketing practice of creating a name, symbol or</div>
            <a href=\"/\" class=\"services__learnmore\"><span>Learn more</span><img src=\"images/cards/arrow.png\" alt=\"arrow image\"></a>
          </div>
          <div class=\"services__item\">
            <img src=\"images/cards/card-icon4.png\" alt=\"card-icon image\">
            <h3 class=\"services__card-header\">Illustration</h3>
            <div class=\"services__card-descr\">An illustration is a decoration, interpretation or visual</div>
            <a href=\"/\" class=\"services__learnmore\"><span>Learn more</span><img src=\"images/cards/arrow.png\" alt=\"arrow image\"></a>
          </div>
        </div>

标签： html css

【解决方案1】：

如果我了解您想要什么，那么您可以通过向 services__item css 类添加高度来解决它：

.services__item {
  height: 100%; /* Just add it here */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}

【讨论】：