Html 在悬停菜单链接时保留图像

Hellow伙计们，我只是按照YT中的一些教程创建了一个菜单链接设计，但是，我遇到了一些错误，当将链接悬停到徽标图像空间时，使图像徽标看不清楚。我想要的是，当鼠标悬停在链接上时，它会创建一个填充或边距，这样图像徽标就不会干扰并停留在他所在的位置。这是我的密码

.logo{
高度：65px；
宽度：65px；
}
.第一导航{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：10px；
}
.firstNav>a{
位置：相对位置；
字体系列：“蒙特塞拉特”，无衬线；
字号：600；
字体大小：14px；
文本转换：大写；
文字装饰：无；
填充：0 12px；
过渡：0.5s；
颜色：#000；
}
导航：悬停a{
转换：比例（1.5）；
不透明度：.6；
过滤器：模糊（4px）；
}
导航a:悬停{
变换：尺度（2）；
不透明度：1；
过滤器：模糊（0）；
}
导航。第一导航a：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：2575aa；
过渡：0.5s；
变换原点：右；
变换：scaleX（0）；
z指数：-1；
}
导航。第一导航a：悬停：：前{
过渡：0.5s；
变换原点：左；
变换：scaleX（1）；
}

---

您可以使用

元素：第n个子元素（索引）

以CSS中的特定元素为目标

nav.firstNav a:n子项（3）：悬停{
位置：相对位置；
左：-55px；
}
导航第一导航a:n子导航（5）：悬停{
位置：相对位置；
右：-55px；
}
.标志{
高度：65px；
宽度：65px；
}
.第一导航{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：10px；
}
.firstNav>a{
位置：相对位置；
字体系列：“蒙特塞拉特”，无衬线；
字号：600；
字体大小：14px；
文本转换：大写；
文字装饰：无；
填充：0 12px；
过渡：0.5s；
颜色：#000；
}
导航：悬停a{
转换：比例（1.5）；
不透明度：.6；
过滤器：模糊（4px）；
}
导航a:悬停{
变换：尺度（2）；
不透明度：1；
过滤器：模糊（0）；
}
导航。第一导航a：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：2575aa；
过渡：0.5s；
变换原点：右；
变换：scaleX（0）；
z指数：-1；
}
导航。第一导航a：悬停：：前{
过渡：0.5s；
变换原点：左；
变换：scaleX（1）；
}

---

我认为，考虑到您试图做的事情，它总是会侵入徽标的空间，因此替代Smollet777的答案是，您可以调整它的行为以推出项目，这样文本内容的宽度就无关紧要了

您可以将导航项目一分为二，以将徽标保持在固定位置，并使用css转换来展开其他项目，如下所示：

.logo{
高度：65px；
宽度：65px；
}
.第一导航{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：10px；
宽度：800px；
}
.blurLink{
位置：相对位置；
字体系列：“蒙特塞拉特”，无衬线；
字号：600；
字体大小：14px；
文本转换：大写；
文字装饰：无；
填充：0 12px；
过渡：字体大小1s，填充1s；
颜色：#000；
}
.模糊链接：悬停{
字体大小：32px；
填充：0 20px；
背景：2575aa；
}
.navGroup{
宽度：40%；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
}
.导航组2{
宽度：40%；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}

---

用这个，你会没事的

.firstNav>a:nth-of-type(3):hover {
    transform: translateX(-55px) scale(2);
}

.firstNav>a:nth-of-type(4):hover {
    transform: translateX(55px) scale(2);
}

---

因为

变换

不会影响布局，所以您不能这样做。你实际上需要改变链接的大小…我想你需要JS来达到我想你想要的效果。