javascript - 如果条件为真，则更改悬停属性

Question

所以我正在使用 HTML、CSS、JavaScript 和 AngularJS 制作一个网络应用程序。到目前为止，我有一个盒子，盒子里有一些内容。单击该框时，我调用一个 javascript 函数来显示更多框，我使用 ng-click 完成了该操作。

<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
   *** things displyaed inside the box ***        

</div>  

clickEnabled 的值(true 或 false)决定了 myFunction() 是否被调用并且这部分工作正常。当 clickEnabled 为 false 时，ng-click 被禁用。现在的问题是，在我的 css 文件中，我有我的 .box 类，这样当我将鼠标悬停在框上时光标是指针，并且框的背景也会在悬停时发生变化。有没有办法制作 cursor:default 并使其在禁用 ng-click 或 clickEnabled 为 false 时不会更改框的背景颜色？

这是我的 CSS 代码示例

     .box {
          border: 1px solid lightgray;
          padding: 10px;
          border-radius: 5px;
          border-color: white;
          box-shadow: 0 0 5px gray;
          cursor: pointer;
          background: #353131;
          border-width: 2px;
          display: inline-block;
          width: 300px;
          height: 150px;
    }

   .box:hover {
       background-color: dimgrey;
       border-color: grey;
    }

同样，当 clickEnabled 为 false/ng-click 为 disabled 时，我不希望光标成为指针。提前致谢:)

Answer 1

你可以尝试使用ng-class

<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
   *** things displyaed inside the box ***        

</div> 

.box.no-cursor {
  cursor: default;
}