gpt4 book ai didi

javascript - 悬停导航栏元素以更改到下一部分

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

我想从页面的第 1 部分切换到第 2 部分,当使用鼠标悬停在导航栏中的按钮时无需单击它们

我应该怎么做?

下面是代码:

CSS:

.container {
overflow: hidden;
background-color: #FFFFFF;
font-family: Arial;
top:0;
left:0;padding: 5px;
}

.container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.pull-right {
float: right;
}
#topNav {
margin-bottom:0;box-shadow: none;background:none;
}


body {
position: relative;
}
#section1 {padding-top:120px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:120px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:120px;height:500px;color: #000000; background-color: #FFD2E9;}
#section4 {padding-top:120px;height:500px;color: #fff; background-color: #00bcd4;}

HTML:

  <div class="navbar navbar-inverse navbar-static-top" id="topNav">
<div class="container">
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<a href="#section1">Toehold Switch</a>
<a href="#section2">Interlab</a>
<a href="#section3">Charaterization</a>
<a href="#section4">Program</a>
</ul>
</div>

最佳答案

单靠 CSS 是做不到的。您应该使用脚本。看看 [fiddler][1] 以供引用。

[1]: https://jsfiddle.net/rajsnd08/c9xonwdL/1/

希望对您有所帮助。

关于javascript - 悬停导航栏元素以更改到下一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45729841/

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