如果條件為真，則更改懸停屬性

Question

所以我正在使用HTML，CSS，JavaScript和AngularJS制作一個Web應用程序。 到目前為止，我有一個盒子里面有一些內容。 單擊該框時，我調用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類，當我將鼠標懸停在框上時光標是指針，並且框的背景也會在懸停時發生變化。 有沒有辦法制作光標：默認並使其在禁用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;
}