Question

在这段代码中，CSS将使Image＆＃34; grow＆＃34;当你将鼠标悬停在它上面。但是，当你将鼠标悬停在单词＆＃34; github＆＃34;上时，我想让图像变大。（图片旁边）。

<style>
    .hvr-grow {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
    }
    .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
</style>


<a href=""><img class ="hvr-grow" src="Images/github.png"> GitHub</a>

Answer 1

由于图像是锚元素的子元素，因此可以使用子选择器表示法：

<style type="text/css">
a:hover .hvr-grow,
a:focus .hvr-grow,
a:active .hvr-grow {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Answer 2

当您将鼠标悬停在图像和文本上时，另一个答案会使图像增长...如果您希望它只在您将鼠标悬停在文本上时生长，则可以执行此类操作。

＆＃13;

.github:hover ~ .image {
  transform: scale(1.1);
}

.image {
  width: 100px;
  height: 100px;
}

＆＃13;

<a>
  <span class="github">Github</span>
  <img class="image" src="https://spin.atomicobject.com/wp-content/uploads/20171003153036/github-logo.png" />
</a>

＆＃13;

Answer 3

您只能使用css访问以前的兄弟姐妹，因此当您将鼠标悬停在GitHub后，您无法使图像增长，但您可以将GitHub放入其中标记并使用float:right使其显示在图片的右侧，并使用label:hover + img在您悬停在标签上时使图片增长：

＆＃13;

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  width: 100px;
  height: 100px;
}

a label:hover+img,
.hvr-grow:focus,
.hvr-grow:active {
  transform: scale(1.1);
}

a label {
  float: right;
  font-size: 20px;
  margin-top: 30px;
}

a {
  display: block;
  width: 200px;
  height: 100px;
}

＆＃13;

<a href="">
  <label>GitHub</label>
  <img class="hvr-grow" src="https://icon-icons.com/icons2/790/PNG/512/github_icon-icons.com_65450.png">
</a>

＆＃13;

激活另一个类的悬停CSS？

3 个答案: