Question

我试图让mye卡（盒子）上的描述文字向上移动10px，当我将鼠标悬停在图片上时。但由于某种原因，城市名称文本和按钮跟随它。

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

你可以在第二个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上的悬停效果。卡片上的文字。 “.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/

className：hover #myID {style}

1 个答案: