如何创建一个wordpress导航菜单，该菜单会在悬停时更改背景图片？

Question

I saw this website and I like the navigation of the website ref: http://www.visitvirginiabeach.com When you hover the mouse over each menu the big picture will change. 我看到了这个网站，并且我喜欢浏览网站的参考网址： http : //www.visitvirginiabeach.com当您将鼠标悬停在每个菜单上时，大图将发生变化。

I have tried integrate the jQuery with the class but it didn't work at all. 我曾尝试将jQuery与该类集成，但它根本不起作用。

$(".nav-item1").hover(function){
$(".bg-nav").css('background','url('images/bg2.jpg')');
}

Is there any plugin or some advanced jQuery coding that can make this happen? 是否有任何插件或一些高级jQuery编码可以实现这一目标？

Any answer is appreciated. 任何答案表示赞赏。

Thank you. 谢谢。

Answer 1

body {
font-family: verdana,arial,sans-serif;
    font-size: 20px;
}
#nav,#nav ul{
line-height: 50px;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
a{
background-color: #B7AF0E;
    border: 1px solid #B7AF0E;
    color: #FFFFFF;
    display: block;
    padding: 0 5px 0 10px;
    text-decoration: none;
}
a:hover{
background-color:#F8EBA5;
color:#77885B;
}
#nav li{    float: left;
    position: relative;
}
#nav ul {
position:absolute;
display:none;

}
#nav ul li a {
    width: 140px;
    float: left;
    height: auto;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:6em;
margin:0px 0 0 35px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}



 $(document).ready(function(){                  
    mainmenu();
});
</script>`<body>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="#">Gallery 1</a>
                <ul>
                <li><a href="#">Gallery 1.1</a></li>
                <li><a href="#">Gallery 1.2</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery 2</a>
                <ul>
                    <li><a href="#">Gallery 2.2</a></li>
                    <li><a href="#">Gallery 2.2</a></li>
                </ul>   
            </li>
            <li><a href="#">Gallery 3</a></li>
        </ul>
    </li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">PHP</a>
                <ul>
                <li><a href="#">Wordpress</li>
                <li><a href="#">Magento</li>
                </ul>
            </li>
            <li><a href="#">ASP.NET</a>
                <ul>    
                    <li><a href="#">Project 1</a></li>
                    <li><a href="#">project 2</a></li>
                </ul>       
            </li>

        </ul>   
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
</body>`

如何创建一个wordpress导航菜单，该菜单会在悬停时更改背景图片？

问题描述

1 个解决方案

解决方案1
0 2014-08-14 13:44:56

如何创建一个wordpress导航菜单，该菜单会在悬停时更改背景图片？

问题描述

1 个解决方案

解决方案1 0 2014-08-14 13:44:56

解决方案1
0 2014-08-14 13:44:56