这是我的第一个问题! Certanly你会帮我这个。
我正在处理这个水平菜单:
HTML:
<div id="menu">
<ul>
<li><a href="#">MENU 1</a>
<ul>
<li><a href="#">SUBMENU 1.1</a>
<ul>
<li><a href="#">SUBMENU 1.1.1</a></li>
</ul></li>
<li><a href="#">SUBMENU 1.2</a></li>
<li><a href="#">SUBMENU 1.3</a></li>
</ul></li>
<li><a href="#">MENU 2</a>
<ul>
<li><a href="#">SUBMENU 2.1</a>
<ul>
<li><a href="#">SUBMENU 2.1.1</a></li>
</ul></li>
</ul></li>
<li><a href="#">MENU 3</a></li>
</ul>
</div>
CSS:
body
{
font-family: "calibri";
margin:0;
padding: 0;
}
#menu
{
width: 100%;
min-width: 400px;
height: 30px;
background-color: #222;
}
#menu ul
{
line-height: 30px;
}
#menu ul li
{
list-style: none;
float: left;
position: relative;
}
#menu ul li a
{
padding-left: 5px;
text-decoration: none;
width: 100px;
height: 30px;
color: white;
background-color: black;
display: block;
}
#menu ul a:hover
{
background-color: grey;
}
#menu li ul
{
display: none;
position: absolute;
left: 0px;
top: 100%;
padding-top: 3px;
padding-left: 3px;
line-height: 20px;
}
#menu li ul li a
{
height: 20px;
font-size: small;
}
#menu li:hover > ul
{
display: block;
}
#menu li ul li a
{
width: 150px;
}
#menu li ul li
{
padding-top: 1px;
}
#menu li ul li ul
{
left: 100%;
top: 0;
}
#menu li:hover > a
{
background-color: grey;
}
JQUERY:
$(function() {
$('li > ul').animate({'opacity': 0});
$('li').hover(function () {
$(this).find('ul:first').stop().animate({'opacity': 1});
},function() {
$(this).find('ul:first').stop().animate({'opacity': 0});
});
});
正如您所看到的,当选项悬停时,淡入效果(具有不透明度)正在工作,但是如何使其淡出?我正在使用IE9。
谢谢!
答案 0 :(得分:0)
首先,我使用提供的代码制作了jsFiddle。正如你所看到的,它运行得很好,这是因为jsFiddle被设置为运行Javascript onLoad。
所以你需要做的是确保你的函数在加载DOM之后运行,方法是将它包装在如下代码块中:
$(document).ready(function() {
// Your JS function here
});
答案 1 :(得分:0)
我假设您希望在鼠标指针悬停在其上时淡入该选项,并在将鼠标指针移离相同选项时将其淡出。在您的问题中明确指出。但是既然你是SO的新手,你就可以免于被投票:P
做出这个假设,你需要为mousever和mouseout事件单独编写代码。
$(document).ready(function() {
$('li').mouseover(function(e){
$(this).fadeIn(500);
});
$('li').mouseout(function(e){
$(this).fadeOut(500);
});
});
尝试从jquery主页阅读有关mouseover和mouseout事件的信息。
答案 2 :(得分:0)
我找到了解决方案......
在CSS上,我对此发表评论:
/*#menu li:hover > ul { display: block;}*/
我还用这个替换了jQuery:
$('#menu ul li').hover(function () { $(this).find('ul:first').stop().fadeToggle('fast');});
谢谢!