懸停導航欄項目以更改爲下一部分

當使用鼠標將導航欄中的按鈕懸停在而不單擊它們時，我想從頁面的第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>

來源

2017-08-17 Alan Chiu

這裏「更改爲第2部分」是什麼意思？你的意思是選擇/突出顯示？例如， –

，頁面從Toehold開關向下滾動至interlab –

您的html代碼看起來不正確，請檢查並更正！ –

你不能用CSS獨自做到這一點。你想使用腳本。看看[fiddler] [1]以供參考。

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

希望它有幫助。

來源

2017-08-17 09:53:19

你可以使用jQuery

FIRST：定義ID您要懸停在 '導航欄項目'。

例如用於在導航欄中的「立足點開關」元素添加id: "item1"：

<a href="#section1" id="item1">Toehold Switch</a>

第二：追加的jQuery庫到項目：

的一種方式，是將其鏈接添加到HTML header：

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

第三：這個JavaScript 腳本添加碼到您的html：

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

提示1：通過使用腳本，如果您將導航欄上的「toehold」鏈接懸停，它將滾動到您鏈接到的部分（即，「部分1」）

TIP 2：您還可以更改腳本標記在animate()功能的滾動速度：只要改變「1000」到任何你想要的。（即1000毫秒，即1秒）！

來源

2017-08-17 11:35:52

懸停導航欄項目以更改爲下一部分

回答

相關問題