Html 使鼠标悬停时只能单击链接文本

我目前正在尝试制作一个h1链接，当鼠标悬停在上面时，它会发生变化。当把/a放在h1之外的时候，这是非常好的，但是这样做解决了当鼠标悬停在整个元素上时，整个元素都会做出反应，并且可以点击——这看起来很糟糕。将/a放置在/h1中只会使文本按需单击-但它不会对悬停作出反应，而是对它所做的所有其他更改作出反应

请注意，我是一个初学者，我不知道你需要什么样的确切背景来帮助我

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

标题a：悬停{ 转换：比例（1.5）； 过渡：0.1s； }

将变换应用于悬停时的

h1

，但将

h1

设置为

显示：内联块

，使其不大于需要的大小

链接将始终可以单击，但它应该可以解决大小问题

a#标题h1{
显示：内联块；
}
a#标题h1{
转型：转型。5s轻松；
}
a#标题h1：悬停{
转换：比例（1.5）；
}

只需添加以下内容：

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

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

这是你可以试试的

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

---

为什么这只适用于字体大小，而不适用于转换：缩放你从Girraj和Paulie_D那里得到的其他答案都很好。我不知道你是什么意思非常感谢，它很有效。但是，为什么围绕转换元素的所有元素都会从转换元素中后退，并在转换回来后返回到它们的位置呢。如何防止这种情况发生？你确定你使用的是

内联块

…转换纯粹是视觉上的，它不应该影响布局。@Paulie\u D是的，我复制了你的代码。它从一开始就稍微改变了我的布局，并且在转换时对布局的改变更大。尽管它按预期工作-只有文本是可点击的。我使用的是12列网格-这会以任何方式影响变换吗？