Question

当我使用鼠标悬停导航栏中的按钮而不点击时，我想从第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>

Answer 1

单独使用CSS无法做到这一点。你应该使用脚本。看看[fiddler] [1]作为参考。

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

希望它有所帮助。

Answer 2

你可以使用jQuery

FIRST：为＆＃39;导航栏项定义 id ＆＃39;你想悬停的地方。

例如为＆＃34; Toehold开关添加function transformArr(arr){ let indexes = arr.map((_, i) => i); indexes.sort((i1, i2) => arr[i2] - arr[i1]); let mainI = indexes[0]; indexes = indexes.map(x => { return {index: x, atLeft: x < mainI, value: arr[x]}; }); let res = {"main": indexes[0].value}; // let names = ['left', 'inner left', 'inner right', 'right']; let names = ['left', 'right']; for(let i = 1; i < indexes.length; i++){ let val = indexes[i]; let name = val.atLeft ? names.shift() : names.pop(); res[name] = val.value; } return res; }＆＃34;导航栏中的元素：

id: "item1"

第二次 将 jQuery库追加到您的项目中：

一种方法是将其链接添加到html <a href="#section1" id="item1">Toehold Switch</a>：

header

THIRD：将此javascript 脚本代码添加到您的html：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

提示1 ：通过使用脚本，如果您将鼠标悬停在＆＃34; toehold＆＃34;在导航栏上的链接，它将滚动到您链接到的部分（即＆＃39;部分1＆＃39;）

提示2 ：您还可以更改脚本代码中<script> $("#item1").hover(function () { var hash = $("#item1").attr("href"); var scroll = $(hash.toString()).offset().top; event.preventDefault(); $('body,html').animate( {scrollTop: (scroll)}, 1000, function () { window.location.hash = hash; } ); }); </script>功能的滚动速度：只需更改＆＃39; 1000＆＃39;无论你想要什么。（即1000毫秒，即1秒）！

将鼠标左键拖动到下一部分

2 个答案: