使用getScrollTop處理：懸停元素

不知道如何使它在滾動後導航欄不透明直到懸停結束，我還想將CSS3轉換插入到此處。使用getScrollTop處理：懸停元素

這是沒有懸停的工作代碼：

<Script> 
window.onload = function() { 

    function getScrollTop() { 
    if (typeof window.pageYOffset !== 'undefined') { 
     // Most browsers 
     return window.pageYOffset; 
    } 

    var d = document.documentElement; 
    if (d.clientHeight) { 
     // IE in standards mode 
     return d.scrollTop; 
    } 

    // IE in quirks mode 
    return document.body.scrollTop; 
    } 

    window.onscroll = function() { 
    var box = document.getElementById('navbox'), 
     scroll = getScrollTop(); 

    if (scroll <= 1) { 
     box.style.top = "0px"; 
     box.style.opacity = "1"; 
    } 
    else { 
     box.style.top = (scroll + 0) + "px"; 
     box.style.opacity = "0.25"; 
    } 
    }; 
}; 
</script>

我已經嘗試添加var hoverbox = document.getElementById('navbox:Hover'),，然後在該方式使用下面的不透明度：

if (scroll <= 1) { 
    box.style.top = "0px"; 
    box.style.opacity = "1"; 
    navbox.style.opacity = "1";

但是，這並不工作。

有關如何使用JScript進行懸停過渡的任何建議？

來源

2014-01-17 Bradly Spicer

你這樣做是錯誤的。用這個命令document.getElementById('navbox:Hover')你說的是瀏覽器，抓住你的id等於'navbox：hover'的元素。您可以嘗試使用CSS來此

<style> 
    #navbox{ 
    transition-property: opacity; 
    transition-duration: 1s; 
    } 
    #navbox:hover{ 
    opacity: 0.5; 
    } 
</style>

注：過渡屬性並不在所有瀏覽器avalaible。

Internet Explorer 10，Firefox，Chrome和Opera支持transition屬性。

Safari需要前綴-webkit-。

Internet Explorer 9及更早版本不支持transition屬性。

Chrome 25及更早版本需要前綴-webkit-。

閱讀更多關於W3 Schools和Mozilla Developer Network。

隨着JS，你可以用這樣的方式：

<script> 
    function FadeIn(){ 
    this.style.opacity = "0.5"; 
    } 
    function FadeOut(){ 
    this.style.opacity = "1"; 
    } 
    function LoadEvents(){ 
    var div = document.getElementById("teste"); 
    div.addEventListener("mouseover", FadeIn, false); 
    div.addEventListener("mouseout", FadeOut, false); 
    } 
</script> 
<body onload="LoadEvents()">

但是，我建議使用JQuery，更容易。爲了更多地瞭解addEventListener（），請閱讀Mozilla Developer Network

來源

2014-01-17 17:01:14

請勿使用navbox:Hover。 jquery mouseover中有一個方法，它可以定義在鼠標移過元素後執行的操作。或者您可以使用addEventListener()來定義鼠標懸停事件。檢查有關如何使用mouseover函數的文檔。

來源

2014-01-17 16:03:02

使用getScrollTop處理：懸停元素

回答

相關問題