Question

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

我试图基于{{3}}来编写代码，但是将其应用于实践时，对我来说不起作用，想知道为什么吗？

/* 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>

Answer 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>

Answer 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>

更改父悬停时子div的位置

2 个答案: