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

时间:2014-03-20 22:29:39

标签: html css html5 css3

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

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

3 个答案:

答案 0 :(得分:2)

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}}属性。

答案 1 :(得分:1)

你刚搞砸了你的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的内容。它最终会缩放不正确。

enter image description here

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

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

答案 2 :(得分:1)

  1. 为什么你的CSS中有HomeHover?这样,它会查找#nav,然后是导航中的HomeHover标记,然后是匹配的锚标记。
  2. 导航a:Hover会这样做。

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

      导航a:悬停{

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

      }

    2. Fiddle