bootstrap鼠标悬停变颜色

Bootstrap提供了一种简单的方式来实现鼠标悬停元素颜色的变化，通常通过CSS样式配合JavaScript完成。你可以使用`.hover()`类或者`data-hover`属性来实现这个效果。这里是一个基本的例子：

<!-- HTML -->
<button class="btn btn-primary" data-hover="text-color: red;">Hover Me</button>

<style>
.btn-primary:hover {
  background-color: #007bff; /* 鼠标悬停时的背景色 */
  color: white; /* 鼠标悬停时的文字颜色 */
}
[data-hover] {
  transition: all 0.3s ease;
}
[data-hover*="color"] {
  color: initial; /* 默认文字颜色 */
}
[data-hover*="text-color"]:hover {
  color: red; /* 当数据-hover包含'text-color'时，悬停时改变文字颜色 */
}
</style>

在这个例子中，当用户将鼠标悬停在按钮上时，背景颜色变为蓝色，文字颜色变为白色。如果按钮上有`data-hover="text-color: red;"`这样的属性，那么文字颜色会在悬停时变为红色。