Question

我正在创建导航，并且已经为按钮创建了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;}

感谢。

Answer 1

使用css ... {/ p>的transition属性

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

在#nav a ...

中添加此内容

适用于Google Chrome，Mozilla Firefox，Opera和最新的IE浏览器......

Answer 2

如果你想用jQuery做这件事，那么你也可以把你的状态挂起来......就像这样：

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

现在在jQuery中使用toggleClass函数和hover，如下所示：

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

jQuery：淡化CSS悬停在静态按钮之上？

2 个答案: