使用jquery悬停更改显示属性

我有不同工作人员的照片，当鼠标悬停在我想要显示的图像上时：无更改为

显示：块。我觉得我所拥有的应该有用，但什么都没有发生。我没有控制台错误。这是一个有角度的项目

HTML

<div class="col-lg-12 staffBlock">
     <div ng-repeat="people in staff">
      <div class="col-lg-4 staffCards">
       <img src="{{people.image}}" alt="" class="img-rounded img-responsive">
       <div class="staffInfo">
        <h3>Name:{{people.name}}</h3>
        <p>Likes:{{people.likes}}</p>
       </div>
      </div>
     </div>
    </div>

jQuery

$('.staffInfo').hover(function(){
 $(this).css('display', 'block');
});

您已在#staffCards上应用了display:none，但正在更改悬停时#staffInfo的显示属性。
因此，即使staffInfo被阻塞，staffCards仍然设置为
display:none
您可以使用
ng show
指令使其成角度

<div class="staffInfo" ng-show="people.isHover" 
   ng-mouseenter="people.isHover=true" 
   ng-mouseleave="isHover=false">
      <h3>Name:{{people.name}}</h3>
      <p>Likes:{{people.likes}}</p>
</div>


姓名：{{people.Name}
喜欢：{{人。喜欢}

。Statffinfo设置为显示：无。不，员工卡好像不起作用。当鼠标悬停在上方时，没有发生任何事情。@AndrewLevy它应该可以工作。.您如何呈现这个DOM？您能解释一下呈现这个DOM吗0这个基本想法应该行得通，但您可能希望将ng show更改为ng样式或ng类以更改css属性或添加基于isHover范围变量的类。@csmithmaui为什么认为需要更改它？
<div class="staffInfo" ng-show="people.isHover" 
   ng-mouseenter="people.isHover=true" 
   ng-mouseleave="isHover=false">
      <h3>Name:{{people.name}}</h3>
      <p>Likes:{{people.likes}}</p>
</div>