Question

当我将鼠标悬停在图像上时，它没有放大。我正在使用transform: scale()获得该功能。当我在它们上悬停时，我想缩放图像。

请有人帮我解决这个问题。

.row__posters {
  display: flex;
}

.row__poster {
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster :hover {
  transform: scale(1.08);
}

<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

Answer 1

您在CSS中有一个语法错误。

.row__poster :hover

应该是

.row__poster:hover

.row__posters {
  display: flex;
}

.row__poster {
  object-fit:contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}

<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

Answer 2

您为伪类:hover提供了额外的空间，它是row_poster :hover 但对其进行修复将使row_post:hover

.row__posters {
  display: flex;
}

.row__poster {
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}

<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

图像未在悬停时放大

2 个答案: