Html 为什么我的导航栏悬停不起作用？

我不知道为什么我的悬停效果在我的导航栏上不起作用，我想知道是否有人能指出我哪里出了问题

以下是我的html和css：

 <div id="nav">
    <a class="selected" href="Property%20Advisor.html">Home</a><a     href="PropAbout.html">About</a><a href="PropContact.html">Contact Us</a>
 </div>



#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);

}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);

}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}

.selected {
background-color: #000000;
color: orange;
}

以下是我的代码：

您需要更改：

#nav homeHover a:hover, onCLick {
    background-color: #44597F;
}

致：

因为对于其中一个，nav homeHover a:hover将选择一个悬停在nav内标记名为homeHover的元素中的元素，该元素不会以所需的a元素为目标。 此外，还需要重置为未覆盖a设置的背景图像属性

您需要更改：

#nav homeHover a:hover, onCLick {
    background-color: #44597F;
}

致：

因为对于其中一个，nav homeHover a:hover将选择一个悬停在nav内标记名为homeHover的元素中的元素，该元素不会以所需的a元素为目标。

---

另外，您需要重置为未覆盖的a设置的背景图像属性。

您刚刚搞乱了CSS目标

我想您正在尝试更改导航a，所以您所需要做的就是使用CSS选择器-nava:hover

为导航和链接元素设置背景渐变通常是个坏主意。这两个渐变将尝试适应不同大小的空间，并碰撞在一起。相反，尝试创建具有渐变的导航，然后在导航上方创建透明按钮，这样就不需要指定新的渐变。这有点难以解释，请检查以下内容：

对于导航按钮，当它没有悬停时，只需完全忽略背景，它将显示后面的导航颜色，如

作为一个更一般的例子：

#nav{
    /* gradients here! */
}

.button    /* not hovered */
{
    /* Don't set a background color - it will be transparant. */
}

.button:hover    /*the same button when it's hovered. */
{
background: #123456;
}

另外，PS：永远不要使用身高：7%；为了导航。它最终无法正常扩展

使用一个确定的高度，如高度：48px

---

如果你真的想创建一个响应性强的网站，a更适合这种情况。

你刚刚搞乱了你的CSS目标

我想您正在尝试更改导航a，所以您所需要做的就是使用CSS选择器-nava:hover

为导航和链接元素设置背景渐变通常是个坏主意。这两个渐变将尝试适应不同大小的空间，并碰撞在一起。相反，尝试创建具有渐变的导航，然后在导航上方创建透明按钮，这样就不需要指定新的渐变。这有点难以解释，请检查以下内容：

对于导航按钮，当它没有悬停时，只需完全忽略背景，它将显示后面的导航颜色，如

作为一个更一般的例子：

#nav{
    /* gradients here! */
}

.button    /* not hovered */
{
    /* Don't set a background color - it will be transparant. */
}

.button:hover    /*the same button when it's hovered. */
{
background: #123456;
}

另外，PS：永远不要使用身高：7%；为了导航。它最终无法正常扩展

使用一个确定的高度，如高度：48px

如果你真的想建立一个响应性强的网站，a更适合这种情况

为什么css中有HomeHover？这样，它会查找nav，然后在nav内查找HomeHover标记，然后查找要匹配的锚标记。 导航a：悬停就行了。 背景图像似乎是在背景色上绘制的。您需要将背景图像设置为悬停时的其他图像

导航a：悬停{ }

为什么css中有HomeHover？这样，它会查找nav，然后在nav内查找HomeHover标记，然后查找要匹配的锚标记。 导航a：悬停就行了。 背景图像似乎是在背景色上绘制的。您需要将背景图像设置为悬停时的其他图像

导航a：悬停{ }

---

谢谢，我没有意识到我在代码中留下了homeHover id标签，那是我在尝试解决我的问题！你的小提琴适用于我的悬停，但它不会突出显示我选择的元素，这与我的悬停是同一个问题吗？谢谢，我没有意识到我在代码中留下了homeHover id标记，这是我尝试解决我的问题！你的小提琴适用于我的悬停，但它没有突出显示我选择的元素，这和我的悬停是同一个问题吗？非常感谢！那真有魅力！我没有想到你提到的渐变碰撞，谢谢你指出，我以后一定会记得的！也谢谢你的例子，这帮助我了解更多！同样感谢关于导航条高度的提示，我没有意识到使用百分比会缩放不正确。我的假设是，在我的网站的大多数方面使用百分比，然后将其相应地扩展到一个设备。非常感谢您指出这一点，我一定会阅读CSS媒体查询。非常感谢！那真有魅力！我没有想到你提到的渐变碰撞，谢谢你指出，我以后一定会记得的！也谢谢你的例子，这帮助我了解更多！同样感谢关于导航条高度的提示，我没有意识到使用百分比会缩放不正确。我的假设是，在我的网站的大多数方面使用百分比，然后将其相应地扩展到一个设备。非常感谢您的指点

---

我一定会阅读CSS媒体查询。谢谢！我没有意识到我留下了homeHover id标签，这是一个尝试让它工作的实验，但你所说的完全有道理！再次感谢！谢谢你！我没有意识到我留下了homeHover id标签，这是一个尝试让它工作的实验，但你所说的完全有道理！再次感谢！