模擬哈弗使用jQuery

HTML：

<div id="MB"> 
    <ul class="list"> 
     <li id="post-5"><a href="#post-5">5</a></li> 
     <li id="post-4"><a href="#post-4">4</a></li> 
     <li id="post-3"><a href="#post-3">3</a></li> 
     <li id="post-2"><a href="#post-2">2</a></li> 
     <li id="post-1"><a href="#post-1">1</a></li> 
    </ul> 
</div>

CSS：

#MB .list li a { 
     float:left; 
     color:#333; 
     background:#f6f6f6; 
     border:1px solid #eaeaea; 
     border-right:none; 
     padding:0 8px; 
     } 

    #MB .list li a:hover, 
    #MB .list li a:focus { 
     color:#fff; 
     border:1px solid #333333; 
     border-right:none; 
     background:#404040; 
     text-decoration:none; 
     }

我想模擬每個按鈕上「懸停」自動順序，每n秒。

這意味着，每n秒的按鈕是「懸停」（改變顏色等），在接下來的時間間隔爲「關斷」和下面的按鈕，將「打開」等等...

來源

2011-03-02 Riccardo

#MB .list a:hover, 
#MB .list a:focus, 
#MB .list .active a { 
    /* hover styles */ 
}

（我已經簡化你的選擇一點，我還建議試圖刪除外div，因爲這些往往是不必要的和ul僅此一項就足以）

JavaScript鼠標：

function setHover() { 
    if ($('#MB .list .active').next().length) { 
     $('#MB .list .active').next().addClass('active').end().removeClass('active'); 
    } else { 
     $('#MB .list .active').removeClass('active'); 
     $('#MB .list li:first-child').addClass('active'); 
    } 
} 

setInterval(setHover, 1000);

來源

2011-03-02 15:16:13 roryf

我正在關注您的解決方案。這是我正在尋找的。運行Firebug，我可以看到分配給每個「li」元素的類「活動」，在間隔時間內正確循環列表項目;但是這種風格並沒有視覺上的變化，我相信因爲內在的「a」元素。 – Riccardo 2011-03-02 16:19:21

你有更新你的CSS選擇器嗎？這會將懸停樣式應用於任何'.active'類的子節點'a'。 – roryf 2011-03-02 16:24:30

是的，它將同時應用於「所有」活動類的「a」元素子元素。 – Riccardo 2011-03-02 20:41:50

定義第三選擇像

#MB .LIST李答：懸停，＃MB .LIST李一：專注，＃MB .LIST李a.simFocus { ... }

，然後添加和刪除「simFocu s「的基於時間的JavaScript代碼。

來源

2011-03-02 15:14:01 fforw

幾乎 - 但優化一點：只使用.simFocus。不會更改函數，但通過使用更多名稱而不是層次結構來簡化選擇器是非常好的速度優化。因此，我們可以使用 .elem-list-link 而不是 #elem ul li a.myclass 。它僅在該上下文中使用，即在低於id =「elem」的ul下面的li下的鏈接（a）中使用。 – 2011-03-02 15:16:33

我會使用setInterval和jQuery.trigger('mouseover', …)。

來源

2011-03-02 15:14:35 kojiro

此鏈接將爲您提供代碼和說明！

http://forum.jquery.com/topic/simulate-hover-event

來源

2011-03-02 15:15:41 Nikhil

-1

嘗試增加的onClick =在您的鏈接一個href標記「返回true」

<a href="../about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()" onClick="return true">About us</a>

onClick =「return true」應該模擬一個光標懸停在離開懸停區域。有效地給你一個懸停效果。

請記住，您的手指必須觸摸懸停效果才能進行的按鈕，這意味着用戶在鏈接加載頁面之前只會看到一兩秒的變化。

來源

2013-03-30 16:15:28 user2212713

模擬哈弗使用jQuery

回答

相關問題