Question

我当前正在尝试将h1链接悬停在其上时进行转换。当将/ a放在h1之外时，这可以完美地工作。但是，这样做的目的是使整个元素在悬停在元素上方时可以做出反应和单击-看起来很糟糕。将/ a放在/ h1内只能使文本按需单击-但它不会对悬停作出反应，但会对所有其他更改作出反应。

请注意，我是一个初学者，我不知道您需要什么确切的上下文来帮助我。

这允许悬停工作，但使整个元素都可单击。

#headlines a:hover {
  transform: scale(1.5);
  transition: 0.1s;
}

<div class="grid_6" style="color: black; text-align: center">
    <a href="headlines.html"
       id="headlines"
       style="text-decoration: none; color: black">
        <h1> Headlines 
          </h1></a>
        <hr>
  </div>

Answer 1

悬停时将变换应用于h1 ...但是将h1设置为display:inline-block，因此它的大小没有必要。

该链接将始终是可点击的，但它可以解决尺寸问题。

a#headlines h1 {
  display: inline-block;
}

a#headlines h1 {
  transition: transform .5s ease;
}

a#headlines h1:hover {
  transform: scale(1.5);
}

<div class="grid_6" style="color: black; text-align: center">
  <a href="headlines.html" id="headlines" style="text-decoration: none; color: black">
    <h1> Headlines
    </h1>
  </a>
  <hr>
</div>

Answer 2

您可以尝试

a#headlines:hover {
 transition: transform .5s ease;
  transform: scale(1.5);
}

Answer 3

只需添加：

 a {
    font-weight: bold;
    font-size: 45px;
    transition: all 500ms;
}

 a:hover {
    font-size:60px;
    font-size-adjust: 20px;
}

这是Fiddle

使悬停时仅单击链接文本

3 个答案: