如果条件为真,则更改悬停属性

Change on hover properties if condition is true

所以我正在使用 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 class 这样当我将鼠标悬停在框上时光标是指针,并且框的背景也会在悬停时发生变化。有没有办法制作 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-clickdisabled 时,我不希望光标成为指针。 提前致谢:)

你可以尝试使用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;
}