在 Angular js 应用程序中悬停时更改引导程序 3 面板类型

【问题标题】：Change bootstrap 3 panel type on hover in Angular js app在 Angular js 应用程序中悬停时更改引导程序 3 面板类型
【发布时间】：2015-12-21 19:20:10
【问题描述】：

在使用 Bootstrap 3 的 Angular JS 1.3 应用程序中，如何在鼠标悬停时更改面板类型

    <div class="panel panel-default> to  <div class="panel panel-info>

谢谢

【问题讨论】：

【解决方案1】：

试试这个

<div class="panel panel-default" 
     ng-class="{panel-info: hover}" 
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false">
</div>

【讨论】：

【解决方案2】：

您可以使用简单的 jquery 来实现这一点，以便在鼠标悬停时添加新类并在鼠标移出时删除

$(".panel")
  .mouseover(function() {
    $(this).addClass('panel-info');
  })
  .mouseout(function() {
    $(this).removeClass('panel-info');
  });

https://jsfiddle.net/ShirishDhotre/4khoydbe/

【讨论】：