避免 img 和标头超链接上的悬停效果与 a 的其余悬停效果

Question

在菜单项上，我正在超链接a，我为此创建了悬停效果。但我不想要标题和 img 超链接的悬停效果。我想要 img 上的干净超链接，没有任何悬停效果的标题。

HTML 和 CSS

* {
margin: 0;
padding: 0;
}        
nav{
width: 100%;
background-color: #f0f0f0;
height:110px;
}        
.menu ul{
margin-left: 50px;
display: flex;
align-items: flex-end;        
}  
.menu ul li {
list-style: none;
}
.menu ul li img {
display: block;
}
.menu ul li a {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
padding-right: 18px;
padding-left: 18px;
padding-top:14px;
padding-bottom:14px;
margin-bottom: 10px;
color: black;
}
.menu ul li a:hover {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
background-color: #ff7504;
color: white;
padding-left: 18px;
padding-right: 18px;
padding-top:14px;
padding-bottom:14px;
margin-bottom: 10px;
}
.menu h1 {
display: block;
font-family: 'Segoe UI';
font-weight: lighter;
font-size: 44px;
padding-right: 50px;
line-height: 0.9;
}

<nav class="menu">
<ul class="menu">
<li>
<a href="#">
<img src="http://placehold.jp/120x120.png" width="120px" height="120px">
</a>
</li>
<li><a class="header" href="#"><h1>Sitename</h1></a>
</li>
<li><a href="#">option1</a>
</li>
<li><a href="#">option2</a>
</li>
<li><a href="#">option3</a>
</li>
<li><a href="#">option4</a>
</li>
</ul>
</nav>

避免 img 和标头超链接上的悬停效果与 a 的其余悬停效果

Answer 1

由于 ：not 选择器方法对您不起作用，我可以想到 2 种方法来做到这一点。

1. 手动重置第一个和第二个超链接的 CSS

.menu ul li:nth-of-type(1) a:hover , .menu ul li:nth-of-type(2) a:hover {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
padding-right: 18px;
padding-left: 18px;
padding-top:14px;
padding-bottom:14px;
margin-bottom: 10px;
color: black;
}

在悬停效果CSS下面添加此CSS！

2. 将类添加到要添加悬停的超链接中，然后编辑这些类。

<nav class="menu">
<ul class="menu">
<li>
<a href="#">
<img src="http://placehold.jp/120x120.png" width="120px" height="120px">
</a>
</li>
<li><a class="header" href="#"><h1>Sitename</h1></a>
</li>
<li><a href="#" class="hoverMe">option1</a>
</li>
<li><a href="#" class="hoverMe">option2</a>
</li>
<li><a href="#" class="hoverMe">option3</a>
</li>
<li><a href="#" class="hoverMe">option4</a>
</li>
</ul>
</nav>

.CSS：

.menu ul li .hoverMe:hover {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
background-color: #ff7504;
color: white;
padding-left: 18px;
padding-right: 18px;
padding-top:14px;
padding-bottom:14px;
margin-bottom: 10px;
}

我知道可能有一种更短的方法来实现它，但让我知道它有帮助！

Answer 2

您当前的选择器

.menu ul li a:hover

说

每当悬停在具有 CSS 类.menu的元素的无序列表中列表项内的任何锚元素时，请根据我为您提供的规则设置锚点样式。

也就是说，正如您所描述的，不是您想要的。相反，您只希望该 HTML 结构中的某些链接具有这样的行为。

实现此目的的最简单和最好的方法是通过向它们添加 CSS 类来排除您不希望悬停的那些，

.menu ul li a:not(.no-hover):hover

* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: #f0f0f0;
height: 110px;
}
.menu ul {
margin-left: 50px;
display: flex;
align-items: flex-end;
}
.menu ul li {
list-style: none;
}
.menu ul li img {
display: block;
}
.menu ul li a {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
padding-right: 18px;
padding-left: 18px;
padding-top: 14px;
padding-bottom: 14px;
margin-bottom: 10px;
color: black;
}
.menu ul li a:not(.no-hover):hover {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
background-color: #ff7504;
color: white;
padding-left: 18px;
padding-right: 18px;
padding-top: 14px;
padding-bottom: 14px;
margin-bottom: 10px;
}
.menu h1 {
display: block;
font-family: 'Segoe UI';
font-weight: lighter;
font-size: 44px;
padding-right: 50px;
line-height: 0.9;
}

<nav class="menu">
<ul class="menu">
<li>
<a href="#" class="no-hover">
<img src="http://placehold.jp/120x120.png" width="120px" height="120px">
</a>
</li>
<li>
<a class="header no-hover" href="#">
<h1>Sitename</h1>
</a>
</li>
<li><a href="#">option1</a>
</li>
<li><a href="#">option2</a>
</li>
<li><a href="#">option3</a>
</li>
<li><a href="#">option4</a>
</li>
</ul>
</nav>

或者通过将 CSS 类添加到您希望悬停行为的所有链接中：

.menu ul li .menulink:hover

* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: #f0f0f0;
height: 110px;
}
.menu ul {
margin-left: 50px;
display: flex;
align-items: flex-end;
}
.menu ul li {
list-style: none;
}
.menu ul li img {
display: block;
}
.menu ul li a {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
padding-right: 18px;
padding-left: 18px;
padding-top: 14px;
padding-bottom: 14px;
margin-bottom: 10px;
color: black;
}
.menu ul li a.menulink:hover {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
background-color: #ff7504;
color: white;
padding-left: 18px;
padding-right: 18px;
padding-top: 14px;
padding-bottom: 14px;
margin-bottom: 10px;
}
.menu h1 {
display: block;
font-family: 'Segoe UI';
font-weight: lighter;
font-size: 44px;
padding-right: 50px;
line-height: 0.9;
}

<nav class="menu">
<ul class="menu">
<li>
<a href="#">
<img src="http://placehold.jp/120x120.png" width="120px" height="120px">
</a>
</li>
<li>
<a class="header" href="#">
<h1>Sitename</h1>
</a>
</li>
<li><a href="#" class="menulink">option1</a>
</li>
<li><a href="#" class="menulink">option2</a>
</li>
<li><a href="#" class="menulink">option3</a>
</li>
<li><a href="#" class="menulink">option4</a>
</li>
</ul>
</nav>

由于 CSS 无法根据元素的内容/子项设置元素样式，因此 CSS 类是您通常在此处使用的。