在父悬停时更改子 div 位置 [重复]答案

【问题标题】：Change child div position on parent hover [duplicate]在父悬停时更改子 div 位置 [重复]
【发布时间】：2018-12-08 11:48:56
【问题描述】：

在父 div 悬停时，我希望它是两个子 div 通过translate 移动位置。

我尝试过根据this approach编写代码，但是在应用代码练习时，它对我不起作用，不知道为什么？

/* HOVER DEFINED HERE */

.cta-wrapper:hover + .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover ~ .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

【问题讨论】：

您在 css 中使用 + 和 ~ 的任何具体原因？

标签： html css

【解决方案1】：

您的选择器不适合悬停。您拥有的选择器不是针对子元素，而是针对包装器之后的元素。

这应该可行：

/* HOVER DEFINED HERE */

.cta-wrapper:hover .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

【讨论】：

【解决方案2】：

由于.cta-image 和.cta-text 是孩子，您使用了错误的选择器来定位它们。

/* HOVER DEFINED HERE */

.cta-wrapper:hover .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

【讨论】：