如何以编程方式触发bootstrap的鼠标悬停效果

Question

在Twitter bootstrap中，一些元素变得“灰白”＆＃34;当鼠标悬停在它们上面时。 buttons和linked list group项都是如此。这里有两个例子：http://imgur.com/a/ABhkT#0

可以通过编程方式触发此效果吗？如果是这样，怎么样？

Answer 1

是，使用'onmouseover'属性。它与'onclick'非常相似，除了显然是为了悬停。

与'onclick'一样，你必须包含一个java脚本函数，它将改变该元素的css样式。

根据您尝试产生此效果的内容，您可以将其直接放入作为对象的标记中，也可以使用<span></span>。

例如：

<div onmouseover="fade()">

    <p>text to fade</p>

</div>

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

应该是直截了当的，这会淡化div中的所有内容（包括背景）

Answer 2

好的，我明白了。

如果效果是由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 3

使用jQuery：

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

取自docs。