html - 类名 :hover #myID {style}

Question

当我将鼠标悬停在图片上时，我试图让我的卡片(框)上的一些描述文本向上移动 10 像素。但出于某种原因，城市名称文本和按钮紧随其后。

No hover in this card (IMG) Here is hover (IMG)

正如你在第二张图片上看到的那样。按钮也会跳起来。

带有文本、城市名称和按钮的卡片的 HTML 代码

    <div class="cards_container">
    <div class="card" id="card_oslo">
      <p class="cardCityInfo">
        Oslo er et kult sted <br> hvor det er mange <br>
        turister året rundt. <br> Så dra og besøk.
      </p>
      <h4 class="card_text">Oslo</h4>
      <a href="#"><h5 id="btn_card">Se mer</h5></a>
    </div>

样式的 CSS 代码，以及我如何尝试对 desc 上的 :hover 效果进行编码。卡片上的文字。 “.card:hover .cardCityInfo”是我试图让鼠标悬停在文本上的地方

    .cardCityInfo{
      font-size: 1.1rem;
      font-family: 'Nunito', sans-serif;
      color: #fff;
      text-align: center;
      z-index: 5;
      margin-top: 100px;
      opacity: 0;
      }

    .card:hover{
      box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
      transition: .5s;
      }

    .card:hover .cardCityInfo{
      opacity: 0.9 !important;
      transition: .5s;
      margin-top: 90px;
      }

    .card:hover .card_text{
      color: #fff;
      transition: .5s;
      }

这是卡片在 CSS 中的样子，如果它做了任何事情...

    .card {
      position:relative;
      width: 315px;
      height: 300px;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: #fff;
      border-radius: 5px;
      margin: 20px 10px;
      float: left;
      /*box-shadow: 0px 2px 3px #999;*/
      }

Answer 1

如果您更改元素的边距，您将更改同一文档流中紧随其后的所有其他内容。要更改它，您只需在元素上使用转换，而不是

.card:hover .cardCityInfo{
  margin-top: 90px;
}

你在那里使用转换:

.card:hover .cardCityInfo{
  transform: translateY(-10px);
}

演示:https://jsfiddle.net/1jgLzdn4/