gpt4 book ai didi

javascript - 如何创建一个在悬停时更改背景图像的 wordpress 导航菜单?

转载 作者:行者123 更新时间:2023-11-28 09:44:26 25 4
gpt4 key购买 nike

我看到了这个网站,我喜欢这个网站的导航引用:http://www.visitvirginiabeach.com当您将鼠标悬停在每个菜单上时,大图将会改变。

我已经尝试将 jQuery 与类集成,但它根本不起作用。

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

是否有任何插件或一些高级 jQuery 编码可以实现这一点?

如有任何答复,我们将不胜感激。

谢谢。

最佳答案

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>`

关于javascript - 如何创建一个在悬停时更改背景图像的 wordpress 导航菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25308776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com