Question

我有不同工作人员的照片，当鼠标悬停在图像上时，我希望{。{1}}更改为。display:none; .staffInfo类。我觉得我应该工作，但没有任何事情发生。我没有控制台错误。这是一个Angular项目。

HTML

display:block;

SCSS

<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

.staffCards{
 margin-top:10px;
  .staffInfo{
  display:none;
  position:absolute;
  bottom:0px;
  height:100%;
  width:65%;
  border-radius:3%;
  background-color:black;
  opacity:.6;
  color:white;
 }
}

Answer 1

您可以使用ng-show指令将其设为AngularWay。

<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>

Answer 2

您已在#staffCards上应用了display：none，但您在悬停时更改了#staffInfo的显示属性。因此，即使staffInfo处于阻止状态，staffCards仍设置为display:none

使用jquery悬停更改显示属性

2 个答案: