时间戳

首页 > 解决方案 > 激活另一个类的悬停CSS？

html - 激活另一个类的悬停CSS？

问题描述

在此代码中，当您将鼠标悬停在图像上时，CSS 将使图像“增长”。但是，当您将鼠标悬停在“github”一词（图像旁边）上时，我想让图像变大。

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

标签： htmlcss

解决方案

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

<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);
}

推荐阅读