JQUERY 和 JQuery CSS 向下菜单 - 无法保留
我使用hoverintent插件创建了一个大型下拉菜单,它的工作原理就像一个魅力,除了当我将鼠标放入细分时,li背景颜色不会保持黑色。我知道这可能是一个愚蠢的修复,但我无法弄清楚。请帮助...
站点:http://www.nestudiosonline.com/test.php
html :
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
CSS:
ul#menu
{
display:block;
list-style-type:none;
margin:0;
padding:0;
}
ul# menu li
{
display:inline;
position: relative;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
position: absolute;
}
ul#menu li.hovering div {
display: block;
}
#aboutdke
{
display:block;
color:#FFF;
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background-color:#000;
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
border:0px;
width:910px;
height:280px;
float:left;
position:absolute;
z-index:99999;
top:164px;
left:140px;
}
a.links:link
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.links:visited
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
/* mouse over link */
a.links:hover
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
/* selected link */
a.links:active
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
JQUERY:
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu
function addMega(){
$(this).addClass("hovering");
}
//remove hovering class to li's inside of the unordermened with the id menu
function removeMega(){
$(this).removeClass("hovering");
}
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time
var megaConfig = {
interval: 300,
sensitivity: 4,
over: addMega,
timeout: 200,
out: removeMega
};
//make list items with the class megamenu have the hoverinter plugin excuted on them
$("li.megamenu").hoverIntent(megaConfig)
});
//]]>
</script>
I created a mega dropdown menu with the hoverintent plugin which works like a charm, except the li background color wont stay black when i put my mouse into the subdiv. I know its probably a silly fix, but I can't figure it out. Please help...
Site:http://www.nestudiosonline.com/test.php
html:
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
CSS:
ul#menu
{
display:block;
list-style-type:none;
margin:0;
padding:0;
}
ul# menu li
{
display:inline;
position: relative;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
position: absolute;
}
ul#menu li.hovering div {
display: block;
}
#aboutdke
{
display:block;
color:#FFF;
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background-color:#000;
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
border:0px;
width:910px;
height:280px;
float:left;
position:absolute;
z-index:99999;
top:164px;
left:140px;
}
a.links:link
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.links:visited
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
/* mouse over link */
a.links:hover
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
/* selected link */
a.links:active
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
JQUERY:
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu
function addMega(){
$(this).addClass("hovering");
}
//remove hovering class to li's inside of the unordermened with the id menu
function removeMega(){
$(this).removeClass("hovering");
}
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time
var megaConfig = {
interval: 300,
sensitivity: 4,
over: addMega,
timeout: 200,
out: removeMega
};
//make list items with the class megamenu have the hoverinter plugin excuted on them
$("li.megamenu").hoverIntent(megaConfig)
});
//]]>
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
因此,列表项本身将具有黑色背景,所有子元素(本身具有透明背景)也将具有该父元素的黑色背景。
So the list item itself will have a black background, all child elements - with transparent backgrounds themselves - will also have that parent's black background.