如何使用HTML/css將鼠標移動到鼠標釋放上？

Question

我有一個網站，我希望這樣做：當我點擊頁面左側的圖片時，頁面向後移動，當我點擊右側的圖片時，頁面向前移動。我把一切都設置正確，所以我試着這樣做只是使用CSS，的onmouseover頁面邊距移動如此多的像素向右或向左：

<p onmouseover="hoverForward" style="text-indent:-1000px;"> 
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;"> 
<img src="image.jpg"> 
</div></p> 

但是，這並沒有給我任何結果。所以，我嘗試使用從W3Schools的JavaScript的onmouseclick一個例子：

function myFunction() 
{ 
document.getElementById("demo").innerHTML="Hello World"; 
} 
<p onmouseover="hoverForward" style="text-indent:-1000px;"> 
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;"> 
<img src="image.jpg"> 
<button onclick="myFunction()">Click me</button> 
<p id="demo"></p> 
</div></p> 

我嘗試了把圖像上的按鈕，測試它的緣故。按鈕在那裏，但是當我點擊它時它沒有滾動。我做錯了什麼？看起來我採取的第一種方法應該肯定有效。 謝謝

Answer 1

無論如何，您的第一個片段無法正常工作，因爲它不是動態的。另外，text-indent不是處理塊單元偏移的最佳方法。第二個不能工作，因爲JavaScript不會滾動，但輸出'Hello，World'到<p id="demo" ...>元素。

更好看看這裏：

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

這與使用HTML ankers的垂直滾動的一個很好的方式，將即使不支持或允許JavaScript的瀏覽器。

願意幫助你嗎？