jQuery:CSS是否悬停在静态按钮的顶部？

我正在创建一个导航，并且已经为按钮创建了CSS属性

我想淡入静态按钮属性顶部的悬停属性

最有效的方法是什么

CSS如下所示：

<div id="nav">
    <form method="post" action="">
        <a>Home</a>
        <a>Link2</a>
        <a>Link3</a>
    </form>
</div>

#nav {
position:absolute;
margin-top:96px;
margin-left:30px;
height: 450px;
width: 140px;
font-family:"Book Antiqua";}

#nav a {
background:url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#C60;
text-decoration:none;
background-position:center;
margin:auto;
display:block;
position:relative;
line-height:190%;
}

#nav a:hover {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:210%;
text-indent:-10px;}

#nav a:active {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#862902;
text-decoration:none;
margin:0 -3px;
z-index:2;}

#nav a:hover, #nav a.j-hover { .... }

$('#nav a').hover(function () {
      $(this).toggleClass("js-hover", 1000);
});

家
链接2
链接3
#导航{
位置：绝对位置；
利润上限：96px；
左边距：30px；
高度：450px；
宽度：140px；
字体系列：“古董书”；}
#导航a{
背景：url（Images/Button.png）；
高度：28px；
宽度：130px；
字体系列：“古董书”；
字体大小：14px；
文本对齐：居中；
颜色：#C60；
文字装饰：无；
背景位置：中心；
保证金：自动；
显示：块；
位置：相对位置；
线高：190%；
}
#导航a：悬停{
背景：url（图像/按钮%20Hover.png）；
高度：34px；
宽度：140px；
字体系列：“古董书”；
字体大小：16px；
文本对齐：居中；
颜色：#C60；
文字装饰：无；
保证金：-3px；
z指数：2；
线高：210%；
文本缩进：-10px；}
#导航a：激活{
背景：url（图像/按钮%20Hover.png）；
高度：34px；
宽度：140px；
字体系列：“古董书”；
字体大小：14px；
文本对齐：居中；
颜色：#862902；
文字装饰：无；
利润率：0-3倍；
z-索引：2；}

---

谢谢。

使用css的

转换属性

-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
-ms-transition:all .3s;

将此添加到
#导航a

这适用于Google Chrome、Mozilla Firefox、Opera和最新的IE…
如果你想使用jQuery，那么也给你的悬停状态一个类。。像这样：

<div id="nav">
    <form method="post" action="">
        <a>Home</a>
        <a>Link2</a>
        <a>Link3</a>
    </form>
</div>

#nav {
position:absolute;
margin-top:96px;
margin-left:30px;
height: 450px;
width: 140px;
font-family:"Book Antiqua";}

#nav a {
background:url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#C60;
text-decoration:none;
background-position:center;
margin:auto;
display:block;
position:relative;
line-height:190%;
}

#nav a:hover {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:210%;
text-indent:-10px;}

#nav a:active {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#862902;
text-decoration:none;
margin:0 -3px;
z-index:2;}

#nav a:hover, #nav a.j-hover { .... }

$('#nav a').hover(function () {
      $(this).toggleClass("js-hover", 1000);
});

现在在jQuery中使用带有
hover
的函数，如下所示：

<div id="nav">
    <form method="post" action="">
        <a>Home</a>
        <a>Link2</a>
        <a>Link3</a>
    </form>
</div>

#nav {
position:absolute;
margin-top:96px;
margin-left:30px;
height: 450px;
width: 140px;
font-family:"Book Antiqua";}

#nav a {
background:url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#C60;
text-decoration:none;
background-position:center;
margin:auto;
display:block;
position:relative;
line-height:190%;
}

#nav a:hover {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:16px;
text-align:center;
color:#C60;
text-decoration:none;
margin:-3px;
z-index:2;
line-height:210%;
text-indent:-10px;}

#nav a:active {
background:url(Images/Button%20Hover.png);
height:34px;
width:140px;
font-family:"Book Antiqua";
font-size:14px;
text-align:center;
color:#862902;
text-decoration:none;
margin:0 -3px;
z-index:2;}

#nav a:hover, #nav a.j-hover { .... }

$('#nav a').hover(function () {
      $(this).toggleClass("js-hover", 1000);
});

与悬停问题无关的一件事是，您可以将css简化很多。任何不变的导航属性（即字体系列）。只需将它们设置在导航块中，除非您希望更改，否则不要将它们重置为下线。如果以后要更改该属性，则更容易。不过这很好，因为导航是垂直的，并且在设置动画时按钮会向下移动一点。