Html 删除特定的悬停效果的标志，同时保持它的链接回到主页

我一直在网站上寻找答案，但运气不好。我已在标题中的导航链接之间居中显示我的徽标。我在链接中添加了下划线悬停效果，这也为我的徽标添加了效果。我想出了如何从logo（指针事件：none；）中删除悬停效果，但这也使我无法将logo作为可点击的链接返回主页。我试着把我的徽标放在一个单独的分区中，以为解决这个问题会更容易，但后来我花了3个小时试图把东西放在正确的位置上（显然，我是web building的新手）。所以现在我回到了我的原始代码，希望在这里得到一些帮助。总结：如何在导航链接上保持悬停效果，同时将其从徽标中删除，并使徽标成为可点击的hopepage链接？提前感谢您的帮助

.header{
显示器：flex；
宽度：100%；
边际上限：0；
填充顶部：10px；
身高：20%；
对齐项目：居中；
证明内容：中心；
}
.cc_nav{
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
背景色：白色；
}
a{
文字装饰：无；
颜色：rgba（0,0,0,0.8）；
利润率：0.40px；
字体系列：Tenar Sans；
字体大小：.8em；
}
a{
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
溢出：隐藏；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：1px；
底部：0；
左：0；
背景色：rgb（192192192）；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
a:悬停：在之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
#克莱尔{
高度：自动；
宽度：自动；
最大高度：140像素；
最大宽度：300px；
}
.诺霍弗{
指针事件：无；
}

---

您可以尝试此方法，它将采用锚标记的默认属性，您需要覆盖该属性，以便在类属性中指定重要属性

.noHover {
    pointer-events: none !important;
  }

只需在下面添加CSS-

.noHover:hover::before {
    background: none;
    visibility: hidden;
}

试试下面的工作演示，也许它可以帮助你

.header{
显示器：flex；
宽度：100%；
边际上限：0；
填充顶部：10px；
身高：20%；
对齐项目：居中；
证明内容：中心；
}
.cc_nav{
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
背景色：白色；
}
a{
文字装饰：无；
颜色：rgba（0,0,0,0.8）；
利润率：0.40px；
字体系列：Tenar Sans；
字体大小：.8em；
}
a{
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
溢出：隐藏；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：1px；
底部：0；
左：0；
背景色：rgb（192192192）；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
a:悬停：在之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
#克莱尔{
高度：自动；
宽度：自动；
最大高度：140像素；
最大宽度：300px；
}
.noHover:悬停：：之前{
背景：无；
可见性：隐藏；
}

---

只需添加css，使其不悬停在徽标上并可单击

a.noHover:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

头{
显示器：flex；
宽度：100%；
边际上限：0；
填充顶部：10px；
身高：20%；
对齐项目：居中；
证明内容：中心；
}
.cc_nav{
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
背景色：白色；
}
a{
文字装饰：无；
颜色：rgba（0,0,0,0.8）；
利润率：0.40px；
字体系列：Tenar Sans；
字体大小：.8em；
}
a{
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
溢出：隐藏；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：1px；
底部：0；
左：0；
背景色：rgb（192192）；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
a:悬停：在之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
a、 noHover:悬停：之前{
能见度：可见；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
}
#克莱尔{
高度：自动；
宽度：自动；
最大高度：140像素；
最大宽度：300px；
}

---

仅为导航链接分配一个类，并在其中定义链接和悬停样式

    <div class="cc_nav" id="centered_nav">
        <a class="hover" href="">HOME</a>
        <a class="hover" href="">SERVICES</a>
        <a class="hover" href="">ABOUT</a>
        <a href="index.html" class="noHover"><img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" /></a>
        <a class="hover" href="">PORTFOLIO</a>
        <a class="hover" href="">BLOG</a>
        <a class="hover" href="">GET IN TOUCH</a>
        <div>

---

请随代码提供一些解释，以便未来用户更容易理解您的想法/代码。-这非常有效。非常感谢您，我非常感谢您的演示！我的荣幸：）@cvc48