如何以編程方式觸發bootstrap的鼠標懸停效果

Question

在twitter引導中，當鼠標懸停在它上面時，某些元素會變灰。這是buttons和linked list group項目。這裏有兩個例子：http://imgur.com/a/ABhkT#0

可以通過程序觸發這種效果嗎？如果是這樣，怎麼樣？

Answer 1

好。

如果效果正在通過CSS類引起的，一個可以簡單地類適用於元素，像這樣：

$('<my_element>').addClass('bootstrapMouseoverGrey') 

這並不工作，但因爲效果不引起由一個班級。這是由僞類造成的。僞代碼不能以編程方式添加。

一種解決方法是創建一個與僞類具有完全相同定義的新實際類。在我的情況下，僞類是a.list-group-item:hover，在bootstrap.css中定義。

a.list-group-item:hover, 
a.list-group-item:focus { 
    text-decoration: none; 
    background-color: #f5f5f5; 
} 

我編輯bootstrap.css作出新的（實際）類，bootstrapMouseoverGrey，用相同的定義僞類。

a.list-group-item:hover, 
a.list-group-item:focus, 
.bootstrapMouseoverGrey { 
    text-decoration: none; 
    background-color: #f5f5f5; 
} 

現在，我可以將該類添加到使用答案頂部的行的元素。這給了我想要的結果。奇蹟般有效！

Answer 2

使用jQuery：

var event = jQuery.Event('<event_name>'); 
event.stopPropagation(); 
$('<selector>').trigger(event); 

從docs服用。

Answer 3

是的，使用'onmouseover'屬性。這與'onclick'非常相似，除了顯然是懸停而已。

就像'onclick'一樣，你將不得不包含一個java腳本函數來改變那個元素的css風格。

根據您試圖產生的效果，您可以將其放入作爲對象的標記中，或使用<span></span>。

例：

<div onmouseover="fade()"> 

    <p>text to fade</p> 

</div> 

Javascript: 
    function fade(){ 
     code to change style 
    } 

應該是直線前進，這將我想通了褪色一切DIV中（包括背景）