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

Question

我不确定为什么我的悬停效果不能在我的导航栏上运行，我想知道是否有人可以指出我哪里出错了？

这是我的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;
}

这是我的代码的JSfiddle： http://jsfiddle.net/VDmh8/1/

Answer 1

http://jsfiddle.net/VDmh8/3/

您需要更改：

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

为：

#nav a:hover {
    background-color: #44597F;
    background-image: none;

}

因为对于{{1>}，#nav homeHover a:hover会在a内的标记名为homeHover的元素中选择悬停在#nav元素上，而a不会定位background-image你想要的元素。 此外，您需要重置为未覆盖的a设置的{{1}}属性。

Answer 2

你刚搞砸了你的CSS目标。

JSFiddle

您尝试更改#nav a我认为，所以您需要做的就是使用CSS选择器 - #nav a:hover。

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

对于导航按钮，只要在没有悬停的情况下完全忽略背景，它就会显示#nav颜色，如here。

作为一个更一般的例子：

#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：永远不会对height: 7%;使用类似nav的内容。它最终会缩放不正确。

使用明确的高度，例如height: 48px。

如果你真的想建立一个自适应网站，CSS Media Query会更适合这种情况。

Answer 3

1. 为什么你的CSS中有HomeHover？这样，它会查找#nav，然后是导航中的HomeHover标记，然后是匹配的锚标记。

导航a：Hover会这样做。

1. 背景图像似乎是在背景颜色上绘制的。您需要在悬停时将背景图像设置为其他内容。

   导航a：悬停{

   background-color: #44597F;
   background-image: none; 
   

   }

Fiddle