防止将鼠标悬停在特定链接上时为 CSS 下划线动画，同时允许其他元素使用 CSS 下划线动画<a>

我正在使用不久前制作的导航栏模板设计一个网站。当我制作该模板时，文档中没有其他链接，但现在，由于我在整个网站中使用它，所以有了。当您将鼠标悬停在正常链接上时，颜色保持不变，但会播放CSS下划线动画。导航栏中的链接也应该发生这种情况，只有一个除外；网站的标题。在我的CSS中添加了以下内容后，当鼠标悬停在标题上时，下划线动画开始播放(.link现在在那里，因为我在所有非导航栏链接中添加了一个同名的类来尝试修复它，唉，没有用(：

a.link {
color: #5dc0e6;
position: relative;
text-decoration: none;
}
a.link:hover {
color: #5dc0e6;
}
a.link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #5dc0e6;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

我现在不知道该怎么办。正如我所说，我在所有非导航栏链接上尝试了一个类，但没有成功。我完全不知所措。这是网站标题的CSS：

ul.title {
list-style-type: none;
margin: 0;
padding: 20;
overflow: hidden;
background-image: url('https://cdn.pixabay.com/photo/2016/08/12/05/06/technology-1587673_960_720.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-color: #e6e5e6;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 5px;
position: static;
}

以下是整个HTML文档(经过轻微编辑以删除网站信息(：

<html>
<!DOCTYPE html>
<head>
<title>Home &mdash; Site Title</title>
<link href="media/favicon.ico" rel="shortcut icon" />
<link href="css/index.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Archivo:500,700" rel="stylesheet" />
</head>
<body>
<ul class="title">
<li><a class="link st" href="/"><font color="#e5e6e5">Site Title</font></a></li>
</ul>
<ul>
<li><a class="nav-item" href="/">Home</a></li>
<li><a class="nav-item" href="#">About</a></li>
<li><a class="nav-item" href="#">Sites</a></li>
<li><a class="nav-item" href="#">Contact</a></li>
</ul>
<p>Welcome to my site! More will be available soon...<br>
<em>Developed by <a class="link" href="#">Developer</a></em>.</p>
</body>
</html>

如有任何帮助，我们将不胜感激。

谢谢！

因为页面的标题是唯一一个行为与其他链接不同的链接；我认为一个简单的解决方案是使用不同的类名作为标题。也许.title不添加动画部分；

a.link, a.title {
color: #5dc0e6;
position: relative;
text-decoration: none;
}
a.link:hover, a.title {
color: #5dc0e6;
}
a.link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #5dc0e6;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

我添加了一个片段来说明我认为您在寻找什么。：(

a:not(.nope) {
color: #5dc0e6;
position: relative;
text-decoration: none;
}
a:not(.nope):hover {
color: #5dc0e6;
}
a.nope {
color: red;
text-decoration: none;
text-transform: uppercase;
}
a:not(.nope):before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #5dc0e6;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:not(.nope):hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.title {
list-style-type: none;
margin: 0;
padding: 20;
overflow: hidden;
background-image: url('https://cdn.pixabay.com/photo/2016/08/12/05/06/technology-1587673_960_720.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-color: #e6e5e6;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 5px;
position: static;
}
ul {
list-style-type: none;
}
ul a:not(.nope) {
}

<ul class="title">
<li><a class="link nope" href="/"><font color="#e5e6e5">Site Title</font></a></li>
</ul>
<ul>
<li><a class="nav-item" href="/">Home</a></li>
<li><a class="nav-item" href="#">About</a></li>
<li><a class="nav-item" href="#">Sites</a></li>
<li><a class="nav-item" href="#">Contact</a></li>
</ul>
<p>Welcome to my site! More will be available soon...<br>
<em>Developed by <a class="link" href="#">Developer</a></em>.</p>

您正在css中查找:not()。只需在一个链接中添加一个自定义类，然后在链接样式中，在a样式中附加:not(.custom-link)。如果您提供HTML，我可以通过编辑我的答案向您展示如何操作。：(

相关内容

最新更新

热门标签：