Php Wordpress菜单项悬停
我正在尝试创建一个自定义下拉菜单 我的代码如下所示:Php Wordpress菜单项悬停,php,jquery,css,wordpress,menu,Php,Jquery,Css,Wordpress,Menu,我正在尝试创建一个自定义下拉菜单 我的代码如下所示: <div id="header"> </div> <div class="layer1_col"> <?php wdg::displayMenu('main'); ?> </div> <div class="programmingTable"></div> <div id="main"&
<div id="header"> </div>
<div class="layer1_col">
<?php wdg::displayMenu('main'); ?>
</div>
<div class="programmingTable"></div>
<div id="main">
.programmingTable{
display:none;
margin-left: 10px;
margin-right: 10px;
padding: 0;
height: 380px;
line-height: 1.5em;
background-color: #e3e3e3;
position: absolute;
z-index: 5;
width: 934px;
top: 87px;
padding-left: 8px;
padding-right: 8px;
padding-top: 45px;
border-bottom-left-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-webkit-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
-moz-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
box-shadow: 0 7px 9px rgba(50,50,50,0.41);
background: -webkit-gradient(linear,0% 0,0% 90%,from(#d9d9d9),to(#fbfbfb));
background: -webkit-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -moz-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -ms-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -o-linear-gradient(top,#d9d9d9,#fbfbfb);
}
#menu-item-12:hover .programmingTable{
display:block;
}
还尝试使用不透明度、z索引。z-index可以工作,但div的其余部分颜色不同。看起来不对
我已经尝试使用jquery来实现这一点:
jQuery('#menu-item-12').mouseover(
jQuery(document).ready( function() {
jQuery('.programmingTable').fadeIn(200)
})
);
jQuery('#menu-item-12').mouseleave(
jQuery(document).ready( function() {
jQuery('.programmingTable').fadeOut(200)
})
);
这不管用。我猜是一半吧。一旦进入pageload,它会使项目淡入淡出。当它悬停在所讨论的div上时,它不会做任何事情
这个问题我已经解决了好几天了,如果有任何帮助,我将不胜感激
关于我的意思,一个更好的例子是悬停在编程上
编辑:这是显示菜单上的类
static public function displayMenu( $name, $atts=array( ))
{
// Getting/Setting the variablen
extract( shortcode_atts( array( 'container' => 'div',
'containerid' => '',
'containerclass' => '',
'menuid' => '',
'menuclass' => '',
'afterlabel' => '',
'beforelabel' => '',
), $atts
));
wp_nav_menu( array( 'menu' => $name,
'menu_id' => $menuid,
'menu_class' => $menuclass,
'link_before' => $beforelabel,
'link_after' => $afterlabel,
'container' => $container,
'container_id' => $containerid,
'container_class' => $containerclass,
));
}
我很确定你的jQuery代码可以工作 它是在准备就绪事件中调用的吗 另外,我会使用.mouseenter事件
jQuery(document).ready(function() {
jQuery('#menu-item-12').mouseenter(function() {
doSomething();
}).mouseleave(function() {
doSomethingElse();
});
})
下拉菜单悬停是问题吗?@James没有下拉菜单,只有一个div需要显示在悬停上。你能用新版本的html和jquery更新你的帖子吗?这是什么意思?没有新版本,我使用wordpress生成的html
jQuery(document).ready(function() {
jQuery('#menu-item-12').mouseenter(function() {
doSomething();
}).mouseleave(function() {
doSomethingElse();
});
})